Redux Redurs不会更新商店

Question

我对Redux-Saga有点皱纹，因为我所做的减速器并没有按照它应该做的那样更新商店。

我已经使用Saga加载静态应用程序内数据，然后使用有效负载将操作数据传递给reducers来触发操作，我执行了console.log（）以确保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 doc也提出了同样的建议。

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

 //perform heapsort
 for(int lastNode = nodeCount-1; lastNode > 0; lastNode--){
     int lastNodeValue = array[lastNode];
     array[lastNode] = array[0];
     array[0] = lastNodeValue;
     siftdown(array, lastNodeValue, 0, lastNode-1);
 }

Answer 2

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

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