将props传递给react-redux容器组件

Question

我有一个在React Native Navigator组件中创建的react-redux容器组件.我希望能够将导航器作为道具传递给此容器组件,以便在按钮按下其表示组件后,它可以将对象推送到导航器堆栈.

我想这样做而不需要手工编写react-redux容器组件给我的所有样板代码(并且也不会错过所有反应 - redux也会在这里给我的优化).

示例容器组件代码:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

我希望能够在我的导航器renderScene功能中调用这样的组件:

<SearchViewContainer navigator={navigator}/>

在上面的容器代码中,我需要能够从mapDispatchToProps函数中访问这个传递的prop .

我不想将导航器存储在redux状态对象上,也不希望将支撑向下传递给表示组件.

有没有办法可以将支柱传递给这个容器组件？或者,有什么替代方法我可以忽略吗？

谢谢.

Answer 1

mapStateToProps和mapDispatchToProps两者取ownProps作为第二个参数.

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

供参考

Answer 2

您可以传入第二个参数,mapStateToProps(state, ownProps)以便访问传递给mapStateToProps中组件的props

Answer 3

使用打字稿执行此操作时有一些问题，因此这里有一个示例。

一个问题是当你只使用 dispatchToProps（而不是映射任何状态道具）时，重要的是不要省略状态参数，（它可以用下划线前缀命名）。

另一个问题是 ownProps 参数必须使用只包含传递的 props 的接口输入 - 这可以通过将你的 props 接口分成两个接口来实现，例如

interface MyComponentOwnProps {
  value: number;
}

interface MyComponentConnectedProps {
  someAction: (x: number) => void;
}

export class MyComponent extends React.Component<
  MyComponentOwnProps & MyComponentConnectedProps
> {
....//  component logic
}

const mapStateToProps = (
  _state: AppState,
  ownProps: MyComponentOwnProps,
) => ({
  value: ownProps.value,
});

const mapDispatchToProps = {
  someAction,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

可以通过传递单个参数来声明组件：

<MyComponent value={event} />