reactjs - React 组件在最终调度和 redux 状态更新时未更新

Question

我对 React 和 Redux 相当陌生，我的组件在更新 Redux 存储的最终调度时没有更新，这是一个问题。我正在使用 thunk 预加载一些数据来驱动我网站的各个部分。我可以看到 thunk 工作并且状态更新似乎正确，但是当数据获取成功分派(dispatch)发生时，组件没有看到状态变化，随后也没有重新渲染。有趣的部分是，组件看到第一个设置加载标志的调度，并且它 react 正确。这是我的代码:

操作

import { programsConstants } from '../constants';
import axios from 'axios'

export const programsActions = {
    begin,
    success,
    error,
};

export const loadPrograms = () => dispatch => {
    dispatch(programsActions.begin());

    axios
        .get('/programs/data')
        .then((res) => {
            dispatch(programsActions.success(res.data.results));
        })
        .catch((err) => {
            dispatch(programsActions.error(err.message));
        });
};

function begin() {
    return {type:programsConstants.BEGIN};
}
function success(data) {
    return {type:programsConstants.SUCCESS, payload: data};
}
function error(message) {
    return {type:programsConstants.ERROR, payload:message};
}

reducer

import {programsConstants} from '../constants';
import React from "react";

const initialState = {
    data: [],
    loading: false,
    error: null
};

export function programs(state = initialState, action) {
    switch (action.type) {
        case programsConstants.BEGIN:
            return fetchPrograms(state);
        case programsConstants.SUCCESS:
            return populatePrograms(state, action);
        case programsConstants.ERROR:
            return fetchError(state, action);
        case programsConstants.EXPANDED:
            return programsExpanded(state, action);
        default:
            return state
    }
}

function fetchPrograms(state = {}) {
    return { ...state, data: [], loading: true, error: null };
}

function populatePrograms(state = {}, action) {
   return { ...state, data: action.payload, loading: false, error: null };
}

function fetchError(state = {}, action) {
    return { ...state, data: [], loading: false, error: action.payload };
}

组件

import React from "react";
import { connect } from 'react-redux';
import { Route, Switch, Redirect } from "react-router-dom";
import { Header, Footer, Sidebar } from "../../components";
import dashboardRoutes from "../../routes/dashboard.jsx";
import Loading from "../../components/Loading/Loading";
import {loadPrograms} from "../../actions/programs.actions";

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.dispatch(loadPrograms());
  }

  render() {
    const { error, loading } = this.props;

    if (loading) {
      return <div><Loading loading={true} /></div>
    }
    if (error) {
      return <div style={{ color: 'red' }}>ERROR: {error}</div>
    }

    return (
      <div className="wrapper">
        <Sidebar {...this.props} routes={dashboardRoutes} />
        <div className="main-panel" ref="mainPanel">
          <Header {...this.props} />
          <Switch>
            {dashboardRoutes.map((prop, key) => {
              let Component = prop.component;
              return (
                  <Route path={prop.path} component={props => <Component {...props} />} key={key} />
              );
            })}
          </Switch>
          <Footer fluid />
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  loading: state.programs.loading,
  error: state.programs.error
});

export default connect(mapStateToProps)(Dashboard);   

组件应该从成功调度接收更新的 props 并使用更新的数据重新渲染。目前，该组件仅在开始调度时重新渲染，并正确显示加载组件，但不会通过 thunk 检索数据并更新到状态来重新渲染。

我已经研究了几天，并且组件未获得状态刷新的普遍接受的原因是无意的状态突变，而不是返回新状态。我不认为我正在改变状态，但也许我正在改变。

任何帮助将不胜感激!

更新 1

根据要求，这里是创建存储和组合 reducer 的代码

商店:

const loggerMiddleware = createLogger();
const composeEnhancers =
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        }) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(
        thunk,
        loggerMiddleware)
);

export const store = createStore(rootReducer, enhancer);

reducer 组合:

import { combineReducers } from 'redux';
import { alert } from './alert.reducer';
import { programs } from './programs.reducer';
import { sidenav } from './sidenav.reducer';

const rootReducer = combineReducers({
  programs,
  sidenav,
  alert
});

export default rootReducer;

Answer 1

第二个参数预计为[preloadedState]:

export const store = createStore(rootReducer, {} , enhancer);

axios.get 返回一个 promise，您需要await 来获取数据:

试试这个:

   export const loadPrograms = () => async (dispatch) => {
      dispatch(programsActions.begin());

      try {
        const res = await axios.get('/programs/data');
        const data = await res.data;
        console.log('data recieved', data)
        dispatch(programsActions.success(data.results));
      } catch (error) {
        dispatch(programsActions.error(error));
      }
    };


const mapStateToProps = state => ({
  loading: state.programs.loading,
  error: state.programs.error,
  data: state.programs.data,
});

行动呼吁

import React from 'react';
import { connect } from 'react-redux';
import { loadPrograms } from '../../actions/programs.actions';

class Dashboard extends React.Component {
  componentDidMount() {
    // Try to call you action this way:
    this.props.loadProgramsAction(); // <== Look at this
  }
}

const mapStateToProps = state => ({
  loading: state.programs.loading,
  error: state.programs.error,
});

export default connect(
  mapStateToProps,
  {
    loadProgramsAction: loadPrograms,
  },
)(Dashboard);