Question

我使用redux编写了一个容器组件，我对mapDispathToProps的实现看起来像这样

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

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

Answer 1

您可以使用redux-thunk创建一个单独的动作创建函数，该函数可以访问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))
        }
    }
}

有些不同的方法来组织这些，但这样的事情应该有用。

Answer 2

可能的方法还是使用合并mergeProps和mapState的{{1}}，并允许同时使用这两者。

mapDispatch

官方文件：react-redux#connect

较大的应用可能存在性能问题：Stack Overflow - Performances and mergeProps in Redux

Answer 3

你可以使用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)
      ...
    }
  }
}

Answer 4

如果您使用过Thunk中间件，则可以将辅助函数写入您的动作

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

Answer 5

您可以尝试使用：

redux-named-reducers

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

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

同样在mapDispatchToProps中：

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

访问mapDispatchToProps方法中的State

5 个答案: