Redux-Thunk getStore() 不保留状态。返回 'undefined'

Question

这可能是最佳做法的问题，但我希望能解释为什么这不起作用。我正在使用 Typescript + Redux + Thunk 并尝试调用这样的操作：

export const requestUserDashboards  = createAction<DashboardModel>(Type.REQUEST_USER_DASHBOARDS);

提取中的调度：

export const fetchDashboards = () => {
        return async (dispatch: Dispatch, getState: any) => {
            try {
                dispatch(requestUserDashboards({ 
                    currentDashboard: getState.currentDashboard,
                    dashboards: getState.dashboards,
                    hasDashboards: false,
                    error: getState.error
                }))

             ...
             }
         })
}

这里是对应的reducer：

export const dashboardReducer = handleActions<RootState.DashboardState, DashboardModel>(
  {
    [DashboardActions.Type.REQUEST_USER_DASHBOARDS]: (state = initialState, action): RootState.DashboardState => ({
      currentDashboard: action.payload!.currentDashboard,
      dashboards: action.payload!.dashboards,
      hasDashboards: action.payload!.hasDashboards,
      error: action.payload!.error
    })
  },
  initialState
);

dispatch 正在运行，但是，getState 没有正确收集当前的商店状态。我正在通过在接收更新商店的组件中执行以下操作来对此进行测试：

componentWillReceiveProps(nextProps: Login.Props) {
    console.log(nextProps.defaultAccounts.defaultAccount);
}

在组件中调用它使用：

this.props.defaultAccountActions.fetchUserDefaultAccount();

该操作正在运行，因为正在捕获从提取中获取的值。

但是，在我使用 getState.xxxx 的地方，这些值返回为未定义：

index.tsx:84 Uncaught TypeError: Cannot read property 'defaultAccount' of undefined

我的减速器的 initialState 正在工作。我可以通过 componentWillMount() 函数中的 console.log(this.props.defaultAccounts.defaultAccount) 看到这一点。

我不确定我还能提供什么。我想我实际上只是从根本上误解了 actions/reducers 如何管理商店。

问题

我试图通过在调度中使用 getState.xxxx 来获取当前存储值。这是执行此操作的正确方法吗？

Answer 1

getState不是那个地方的函数吗？所以你需要做点什么

 const state = getState();

然后在 dispatch 中使用 state

在文档中找到，是的，它是那个地方的一个函数，因此您应该首先调用一个函数来获取状态，然后使用它（例如，来自下面的文档）

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

Answer 2

如果您在组件中使用 mapstatetoprops，则可以使用它从商店中获取值。 mapStateToProps 第一个参数实际上是 Redux 状态。它实际上是一个抽象的 getState()。

const mapStateToProps = function(state, ownProps) {
   // state is equivalent to store.getState()
   // you then get the slice of data you need from the redux store
   // and pass it as props to your component

   return {
     someData: state.someData
   }
}

Redux-Thunk getStore() 不保留状态。返回 'undefined'

Redux-Thunk getStore() doesn't retain state. Returning 'undefined'

javascript

reactjs

redux

redux-thunk