【问题标题】：Redux reducers aren't updating the storeRedux reducer 没有更新 store
【发布时间】：2018-09-27 17:12:41
【问题描述】：

我对 Redux-Saga 有点不满，因为我所做的 reducer 并没有像它应该做的那样更新 store。

我使用 Saga 加载静态应用内数据，然后使用有效负载将数据传递给减速器触发操作，我执行了 console.log() 以确保减速器从操作中获取有效负载，他们是 - 但是当我将数据返回到状态以便可以在组件中访问它时，问题似乎发生了。在道具中，我只从减速器获得默认状态，对此问题的任何帮助将不胜感激。以下是我正在使用的代码；

actions.js

    export function loadAppAction() {
      return {
        type: types.LOAD_APP
      }
    }

    export function loadAppDataAction(data) {
      return {
        type: types.LOAD_APP_DATA,
        payload: data
      }
    }

api.js

    import appData from '../components/appData';

    export function appDataResponse() {
      return appData;
    }

app.js

    export class App extends Component {

      constructor(props) {
        super(props);
        const { loadAppAction } = this.props;
        loadAppAction();
      }

      render() {
        const {
          initialLoadData,
          activateModalAction,
          deactivateModalAction,
          toggleModal
        } = this.props;
        console.log('props', this.props)
            return (
          <div className="app">
            {
              toggleModal &&
              <SignInModal
                deactivateModalAction={deactivateModalAction}
              />
            }
          </div>
      }
    }

    function mapStateToProps({ initialLoadReducer, toggleModalReducer }) {
      console.log('lets see', initialLoadReducer);
      return {
        initialLoadData: initialLoadReducer,
        toggleModal: toggleModalReducer
      };
    };

    export default connect(
      mapStateToProps, {
        loadAppAction: actions.loadAppAction,
        activateModalAction: actions.activateModalAction,
        deactivateModalAction: actions.deactivateModalAction,
      })
      (App);

initialLoadReducers.js

    export default function (state = [], action) {
      switch (action.type) {
        case types.LOAD_APP_DATA:
          return [...action.payload];
        default:
          return state;
      }
    }

传奇 - index.js

    function* watchLoadAppAction() {
      yield takeEvery(types.LOAD_APP, loadAppSaga);
    }

    export default function* rootSaga() {
      yield all ([watchLoadAppAction()]);
    }

loadAppSaga.js

    export default function* loadAppSaga(action) {
      const response = yield call(api.appDataResponse);
      yield put(actions.loadAppDataAction(response));
    }

以下是我的控制台截图，供参考

【问题讨论】：

标签： javascript reactjs redux redux-saga

【解决方案1】：

我建议当 componentDidMount 不在构造函数中时调用 loadAppAction。 React doc 也提出了相同的建议。

https://reactjs.org/docs/react-component.html#componentdidmount

export class App extends Component {
   componentDidMount() {
     this.props.loadAppAction();
   }
   ...
}

【讨论】：

感谢您提请我注意，非常感谢

【解决方案2】：

好吧，我在这里解决了问题，我试图用一个空数组初始化应用程序，但无论如何都不会工作，因为组件期望从 redux 接收道具，这是一个空数组。这就是为什么 React 在第一次运行时没有创建 DOM，这导致应用程序停止重新渲染，即使 props 发生了变化。

为了使其工作，我现在使用相同的数据结构但使用空字符串值初始化应用程序，并在下一步中通过 Redux Saga 将数据可用到 reducer 并将其传递回 React 组件。

【讨论】：