redux 通过 bindActionCreators 预绑定,一种反模式?
redux pre-binding through bindActionCreators, an anti-pattern?
在我的 redux 应用程序中,我经常发现自己使用以下模式
// declare an action creator in a centralized / state management related location in the App (i.e. not the components/containers)
const myActionCreator1 = () => (dispatch) => { ... }
const myActionCreator2 = createAction(ACTION_2)
// then later in a mapDispatchToProps of a Container component
function mapDispatchToProps(dispatch) {
bindActionCreators({myActionCreator1, myActionCreator2}, dispatch);
}
在这些情况下,预绑定 动作创建者是否是一种反模式?鉴于 redux 中只有 1 个调度程序针对 1 个商店工作?
即
// actionCreators.ts
export const myActionCreators = {
myActionCreator: bindActionCreators(..., dispatch)
}
如果这个模式没有缺点,那么对于简洁来说是个好消息....
澄清
简洁的好处只有在多个组件重复使用同一个动作创建者时才会显现出来。因为这些组件将不再需要 mapDispatchToProps 对于像上面示例这样的直接案例
connect
函数支持第二个参数的 "object shorthand" 语法。无需创建接收 dispatch
的 mapDispatchToProps
函数(并且可能在内部使用 bindActionCreators
),您可以将充满动作创建者的对象直接传递给 connect
:
const actionCreators = {
addTodo,
toggleTodo
};
export default connect(null, actionCreators)(MyComponent);
充满动作创建者的对象将自动 运行 到 bindActionCreators
,调用 this.props.addTodo("Buy Milk")
将适当地调度动作创建者。
我在我的博客中讨论了这种方法的一些优点 post Idiomatic Redux: Why use action creators?。
在我的 redux 应用程序中,我经常发现自己使用以下模式
// declare an action creator in a centralized / state management related location in the App (i.e. not the components/containers)
const myActionCreator1 = () => (dispatch) => { ... }
const myActionCreator2 = createAction(ACTION_2)
// then later in a mapDispatchToProps of a Container component
function mapDispatchToProps(dispatch) {
bindActionCreators({myActionCreator1, myActionCreator2}, dispatch);
}
在这些情况下,预绑定 动作创建者是否是一种反模式?鉴于 redux 中只有 1 个调度程序针对 1 个商店工作?
即
// actionCreators.ts
export const myActionCreators = {
myActionCreator: bindActionCreators(..., dispatch)
}
如果这个模式没有缺点,那么对于简洁来说是个好消息....
澄清
简洁的好处只有在多个组件重复使用同一个动作创建者时才会显现出来。因为这些组件将不再需要 mapDispatchToProps 对于像上面示例这样的直接案例
connect
函数支持第二个参数的 "object shorthand" 语法。无需创建接收 dispatch
的 mapDispatchToProps
函数(并且可能在内部使用 bindActionCreators
),您可以将充满动作创建者的对象直接传递给 connect
:
const actionCreators = {
addTodo,
toggleTodo
};
export default connect(null, actionCreators)(MyComponent);
充满动作创建者的对象将自动 运行 到 bindActionCreators
,调用 this.props.addTodo("Buy Milk")
将适当地调度动作创建者。
我在我的博客中讨论了这种方法的一些优点 post Idiomatic Redux: Why use action creators?。