16

在 Redux 中将多个状态与相应的动作创建者连接起来的正确方法是什么？这甚至是个好主意吗？如果这是一个愚蠢的想法，我该如何解决？

export default connect(

// which part of the Redux global state does
// our component want to receive as props?
(state) => {
  return {
    state: state.instagram
  };
},

// which action creators does
// it want to receive by props?
(dispatch) => {
  return {
    actions: bindActionCreators(instagramActions, dispatch)
  };
}

)(FeedContainer);

我基本上想要的是这样的：

...
state: {state.instagram, state.facebook}
...

...
const mergedActions = {instagramActions, facebookActions};
actions: bindActionCreators(mergedActions , dispatch)
...
4

3 回答 3

20

使用提供的回调 mapStateTopProps 和 mapDispatchToProps 是将组件与过滤的状态子集和已绑定的 actionCreators 连接起来的正确方法。

要实现您想要的，您只需执行以下操作：

(state) => {
  const { instagram, facebook } = state;
  return {
    state: { instagram, facebook }
  };
}

和

(dispatch) => {
  return {
     actions: bindActionCreators(Object.assign({}, instagramActions, facebookActions), dispatch)
  };
}

这不起作用：

actions: bindActionCreators({instagramActions, facebookActions} , dispatch)

因为该方法还不支持嵌套对象。请参阅此处的代码。它仅遍历键并查找功能。

在您的 mapDispatchToProps 回调中，您可以离开额外的状态层

(state) => {
   const { instagram, facebook } = state;
   return {
      instagram, 
      facebook
   };
}

通过这样做，您可以使用以下方式访问道具：

this.props.facebook而this.props.instagram不是 this.props.state.facebookand this.props.state.instagram。但这只是我认为的风格问题。

有几种方法可以绑定你的 state 和 dispatch 到 props。最后还是风格问题。我可以提供几个不同的示例来说明如何做到这一点，但最好查看官方文档并找到自己的风格https://github.com/reactjs/react-redux/blob/master/docs/api.md

于 2016-02-17T11:58:35.930 回答
3

或者你可以简单地这样做：

import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return {
    todoActions: bindActionCreators(todoActionCreators, dispatch),
    counterActions: bindActionCreators(counterActionCreators, dispatch)
  }
}

如 react-redux 文档中所示

于 2018-09-18T08:43:10.340 回答
1

我知道这是一个老问题，但如果其他人想将所有操作映射到一个键中this.props（比如我），我在这里加两分钱。

扩展 DavinTryon 对已接受答案的评论，实现“ mergedActions”的另一种方法是使用扩展运算符，特别是如果您想actions对所有操作使用一个键（例如 ）并使用 调用它们this.props.actions.[specificAction]。以下是您必须在connect方法中执行的操作：

export default connect(
(state) => {
  return {
    state: state.instagram
  };
},

(dispatch) => {
  return {
    actions: bindActionCreators({...instagramActions, facebookActions}, dispatch)
  };
}

)(FeedContainer);

如果您分别声明方法（使用类似mapDispatchToPropsand mapStateToProps），您可以编写mapDispatchToProps如下：

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators({ ...instagramActions, facebookActions }, dispatch)
  };
};

这会将您的所有动作创建者都映射到facebookActions和。instagramActionsthis.props.actions

于 2018-10-29T10:01:04.270 回答