Redux mapDispatchToProps方法内部的访问状态

我已经使用redux编写了一个容器组件，我对

mapDispatchToProps

的实现如下所示

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onChange: (newValue) => {
            dispatch(updateAttributeSelection('genre', newValue));
            dispatch(getTableData(newValue, ownProps.currentYear));
        }
    }
}

---

问题是为了获取TableData，我需要一些其他组件的状态。如何在此方法中访问state对象？

您可以使用redux thunk创建一个单独的action creator函数，该函数可以访问

getState

，而不是在

mapDispatchToProps

中定义函数：

function doTableActions(newValue, currentYear) {
    return (dispatch, getState) => {
        dispatch(updateAttributeSelection('genre', newValue));
        let state = getState();
        // do some logic based on state, and then:
        dispatch(getTableData(newValue, currentYear));
    }
}


let mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onChange : (newValue) => {
            dispatch(doTableActions(newValue, ownProps.currentYear))
        }
    }
}

---

有一些不同的方法来组织这些，但类似的方法应该会起作用。

您可以使用redux thunk来获取状态。 编写一个帮助器函数，如下所示：

const getState = (dispatch) => new Promise((resolve) => {
  dispatch((dispatch, getState) => {resolve(getState())})
})

您可以在异步函数或生成器函数中使用：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    async someFunction() {
      const state = await getState(dispatch)
      ...
    }
  }
}

---

可能的方法也是使用

mergeProps

，它将

mapState

和

mapspatch

合并在一起，并允许同时使用两者

// Define mapState
const mapState = (state) => ({
  needeedValue: state.neededValue
})

// Define mapDispatch
const mapDispatch = (dispatch, ownProps) => {
  return {
    onChange: (newValue, neededValue) => {
      dispatch(updateAttributeSelection('genre', newValue));
      dispatch(getTableData(newValue, ownProps.currentYear, neededValue));
    }
  }
}

// Merge it all (create final props to be passed)
const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return {
    ...stateProps,  // optional
    ...dispatchProps,  // optional
    onChangeWithNeededValue: (newValue) => (
      dispatchProps.onChange(
        newValue,
        stateProps.needeedValue  // <<< here the magic happens
      )
    )
  }
}

// Pass mergePros to connect
const MyContainer = connect(mapState, mapDispatch, mergeProps)(MyComponent);

//定义映射状态
常量映射状态=（状态）=>({
neededValue:state.neededValue
})
//定义映射分派
const mapDispatch=（dispatch，ownProps）=>{
返回{
onChange：（newValue，neededValue）=>{
分派（updateAttributeSelection（“流派”，newValue））；
分派（getTableData（newValue、ownProps.currentYear、neededValue））；
}
}
}
//全部合并（创建要传递的最终道具）
const mergeProps=（stateProps、dispatchProps、ownProps）=>{
返回{
…stateProps，//可选
…分派道具，//可选
OnChangeWithNeedValue:（newValue）=>(
分派道具(
新价值，
stateProps.neededeValue/您可以尝试使用：


它允许您在代码中的任何位置获取状态，如下所示：

const localState1 = getState(reducerA.state1)
const localState2 = getState(reducerB.state2)

同样，在mapDispatchToProps中：

const mapDispatchToProps = dispatch => {
  return {
    onClick: () => {
      dispatch(someAction(getState(moduleA.state1)));
    }
  };
};

如果您使用了Thunk中间件，那么您可以将helper函数写入
Action.Js

export const getSearchedText =  () => (dispatch, getState) => {
    const { app } = getState();
    return app.searchedText;
}

如果您已经使用过容器设计模式，那么您的属性容器应该在下面

Container.js

export const mapDispatchToProps = (dispatch, ownProps) => {
    return {
             setSearch: search => {
                 var searchedText = dispatch(getSearchedText());
             }
}

我认为在mapDispatchToProps中访问状态的真正用例是知道哪些操作在运行时可用。例如，您可以将每个可能的操作映射到一个函数，并调用它来调度该操作，或者使用if子句测试该操作是否可用。在我看来，这样做太复杂了简单的事情。此解决方案还将
onChange
传递给
MyComponent
。如果您只想传递
onchangewithneedValue
，则必须排除此道具。