Redux reducers没有更新存储

Question

我对Redux-Saga有一点不满，因为我做的reducers没有像它应该做的那样更新商店。

我已经使用Saga加载了一个静态的应用内数据，然后使用有效负载将数据传递给reducers来触发操作，我做了console.log()来确保reducers从操作中获得有效负载，它们确实是这样的-但是当我将数据返回到状态中以便可以在组件中访问时，问题似乎发生了。在props中，我只能从reducers获得默认状态，在这件事上的任何帮助都会非常感谢。下面是我使用的代码；

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;
      }
    }

saga - 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));
    }

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

​

Answer 1

我建议在componentDidMount不在构造函数中时调用loadAppAction。React文档也给出了同样的建议。

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

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

Answer 2

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

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