单个组件中的多个actionCreators
问题描述:
我想让多个actionCreators分派到一个组件中。我知道你可以用状态单个组件中的多个actionCreators
export default connect(
(state: ApplicationState) => Object.assign({}, state.search, state.resources),
ResourcesState.actionCreators// i have another actionCreator I want to add
)(Home) as typeof Home;
,但不能确定的语法与actionCreators做到这一点做到这一点。我已经读入
mapDispatchToProps
,但不知道如何实现。
答
mapDispatchToProps
是connect
中的第二个参数。因此,例如:
import customAction from 'actions-directory-in-your-app'
const mapStateToProps =() => {} // no implementing anything for example purposes
const mapDispatchToProps =() => ({ customAction })
const ConnectedContainer = connect(
mapStateToProps,
mapDispatchToProps
)(YourContainer)
customAction
目前已成为YourContainer
道具让您可以在组件中使用同样的方式等道具。
答
的第二个参数来连接需要一个object
或functio
ñ所以你可以了解更多关于如何用行动创造者添加
export default connect(
(state: ApplicationState) => Object.assign({}, state.search, state.resources),
{
ResourcesState.actionCreators,
some_other_action_creators,
some_more
}
)(Home) as typeof Home;
而且通读这个答案#2
Why is there no need for a mapDispatchToProps function here?
答
有几种方法可以设置在React组件中分配Redux动作:
- 使用
connect(mapState)(MyComponent)
。默认情况下,您的组件将被给予props.dispatch
,您可以拨打props.dispatch({type : "SOME_ACTION"})
。 -
传递
mapDispatchToProps
函数作为连接的第二个参数。在里面,你可以创建新的函数引用调用dispatch
:function mapDispatchToProps(dispatch) { return { addTodo : (text) => dispatch({type : "ADD_TODO", text}) } }
-
您还可以使用终极版
bindActionCreators
工具来代替:function mapDispatchToProps(dispatch) { return bindActionCreators({addTodo, toggleTodo}, dispatch); }
-
最后,你可以传递一个对象全面的行动创造者直接的到
connect
:const actions = {addTodo, toggleTodo}; export default connect(mapState, actions)(MyComponent);
我强烈推荐第四种方法,我在我的博客文章Idiomatic Redux: Why Use Action Creators?中也会谈到。
答
连接的第二个参数需要一个对象,因此您可以使用ES6语法并避免使用mapDispatchToProps
。
import { yourAction } from './your_actions_folder'
class Home extends Component{
....
//For dispatch a action you only call the action Creator
this.props.yourAction()
}
export default connect(mapStateToProps,{yourAction})(Home)