使用redux-thunk從動作創建者中訪問“ getState”？

Question

我下面有一個mapDispatchToProps函數。

export function mapDispatchToProps(dispatch, ownProps) {
  return {
    handleChangeLang: changeLocaleDispatcher(dispatch),
    handleChange: handleChangeDispatcher(dispatch),
    handleSubmit: handleSubmitDispatcher(dispatch)
  }
}

我剛剛在項目中添加了redux-thunk ，因此我可以從動作創建者那里訪問state （認為​​這是正確的術語）。

似乎在redux-thunk中沒有任何文檔概述如何從mapDispatchToProps訪問getState 。 使用store.dispatch方法dispatch文檔。

Answer 1

您的初始語法是錯誤的，“ hacky”示例也不是您應該怎么做的。

示例如下：

import {thunkAction1, thunkAction2} from "myActions";
import {bindActionCreators} from "redux";

const mapDispatchToProps(dispatch) => {
    return {
        manuallyBoundAction : (...args) => dispatch(thunkAction1(...args)),
        autoBoundAction : bindActionCreators(thunkAction2, dispatch),
        multipleActionsTogether : bindActionCreators({thunkAction1, thunkAction2}, dispatch)
    }
};

而且，不能在mapDispatchToProps內部訪問getState本身。 它在thunk中可用，但在mapDispatch不可mapDispatch 。

您可能想閱讀有關為何存在重擊的答案 ，以及有關異步操作的Redux文檔。

Answer 2

修補錯誤：/

let ProvidedApp = (serverProps) => {

  let store = getStore(serverProps)

  let ConnectedApp = connect(
    mapStateToProps,
    mapDispatchToProps(store)
  )(App)

  return (
    <Provider store={store}>
      <ConnectedApp/>
    </Provider>
  )
}

export function mapDispatchToProps(store) {
  return (dispatch, ownProps) => {
    return {
      handleChangeLang: store.dispatch(changeLocaleDispatcher),
      handleChange:  store.dispatch(handleChangeDispatcher),
      handleSubmit: store.dispatch(handleSubmitDispatcher)
    }
  }
}

Answer 3

因此，盡管在您的問題中沒有看到您當前的動作創建者，但我將假設它是ES6 / ES2015 JavaScript。

以下內容應使您可以自由地獲取任何狀態。 既然您有redux-thunk ，那么您應該很好。

export function setActivity(activityName) {
  return function (dispatch, getState) {
    dispatch({
      type: SET_ACTIVITY,
      description: 'Set the name of the activity being done now',
      currentActivityName: activityName,
      currentActivityData: getState().activityStore.activities[activityName]
    });
  };
}

activityStore與您為該特定reducer定義的內容相同，請參見下文。

export const reducers = {
  activityStore: ActivityStore.reducer,
  someOtherStore: SomeOtherStore.reducer
};