如何使用连接w / Redux从this.props获得简单的调度?

我有一个简单的React组件连接起来(映射一个简单的数组/状态)。 为了避免引用商店的上下文,我想要一种方式直接从道具“派遣”。 我见过其他人使用这种方法,但由于某种原因无法访问此:)

这里是我目前使用的每个npm依赖的版本

"react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" 

这是组件连接方法

 class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button> </div> ); } }; function mapStateToProps(state) { return { people: state.people }; } export default connect(mapStateToProps, { fetchUsers })(Users); 

如果你需要看减速机(没有什么令人兴奋的,但在这里)

 const initialState = { people: [] }; export default function(state=initialState, action) { if (action.type === ActionTypes.ADD_USER) { let newPeople = state.people.concat([{id: action.id, name: 'wat'}]); return {people: newPeople}; } return state; }; 

如果你需要看看我的路由器是如何configurationw / redux的

 const createStoreWithMiddleware = applyMiddleware( thunk )(createStore); const store = createStoreWithMiddleware(reducers); var Route = ( <Provider store={store}> <Router history={createBrowserHistory()}> {Routes} </Router> </Provider> ); 

更新

看起来像是如果我省略我自己的连接调度(目前上面显示fetchUsers),我会得到调度免费(只是不知道这是如何设置瓦特/asynchronous行动通常会起作用)。 人们是混合搭配还是一无所有?

[mapDispatchToProps]

3 Solutions collect form web for “如何使用连接w / Redux从this.props获得简单的调度?”

默认情况下, mapDispatchToProps只是dispatch => ({ dispatch })
所以如果你不指定connect()的第二个参数,你将会在你的组件中注入dispatch注入。

如果您将自定义函数传递给mapDispatchToProps ,则可以对该函数执行任何操作。
几个例子:

 // inject onClick function mapDispatchToProps(dispatch) { return { onClick: () => dispatch(increment()) }; } // inject onClick *and* dispatch function mapDispatchToProps(dispatch) { return { dispatch, onClick: () => dispatch(increment()) }; } 

为了节省一些打字Redux提供的bindActionCreators() ,可以让你打开这个:

 // injects onPlusClick, onMinusClick function mapDispatchToProps(dispatch) { return { onPlusClick: () => dispatch(increment()), onMinusClick: () => dispatch(decrement()) }; } 

进入这个:

 import { bindActionCreators } from 'redux'; // injects onPlusClick, onMinusClick function mapDispatchToProps(dispatch) { return bindActionCreators({ onPlusClick: increment, onMinusClick: decrement }, dispatch); } 

或者当道具名称与动作创build者名称匹配时更短:

 // injects increment and decrement function mapDispatchToProps(dispatch) { return bindActionCreators({ increment, decrement }, dispatch); } 

如果你希望你可以肯定地手动添加dispatch

 // injects increment, decrement, and dispatch itself function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ increment, decrement }), // es7 spread syntax dispatch }; } 

关于你是否应该这样做,没有官方的build议。 connect()通常用作Redux-aware和Redux-unaware组件之间的边界。 这就是为什么我们通常觉得注入绑定的动作创build者和dispatch都没有意义。 但是,如果你觉得你需要这样做,随时可以。

最后,你现在使用的模式是一个比调用bindActionCreators更短的bindActionCreators 。 当你所做的只是返回bindActionCreators ,你可以省略这个调用,而不是这样做:

 // injects increment and decrement function mapDispatchToProps(dispatch) { return bindActionCreators({ increment, decrement }, dispatch); } export default connect( mapStateToProps, mapDispatchToProps )(App); 

可以写成这样

 export default connect( mapStateToProps, { increment, decrement } // injects increment and decrement )(App); 

然而,只要你想要更多的自定义的东西,比如传递dispatch ,你就不得不放弃那个简短的语法。

你通常可以根据自己的喜好进行混搭。

如果这是你想要的,你可以通过dispatch作为道具:

 export default connect(mapStateToProps, (dispatch) => ({ ...bindActionCreators({fetchUsers}, dispatch), dispatch }))(Users); 

我不知道如何使用fetchUsers (作为一个asynchronous函数?),但通常使用像bindActionCreators 自动绑定调度,然后你将不必担心直接在连接组件中使用dispatch

使用dispatch目录sorting和redux耦合哑元 ,无状态的组件。 这可以使它不便携。

虽然可以将dispatch作为dispatch一部分传递下去,但我build议避免直接从组件中访问storedispatch 。 看起来你会更好地通过在连接的第二个参数dispatchToProps传递一个绑定的动作创build者

看到一个例子,我发布在这里https://stackoverflow.com/a/34455431/2644281如何传递一个“已经绑定的行动创造者”这种方式您的组件不需要直接了解或取决于存储/调度&#x3002;

对不起,很简单。 我会更新瓦特/更多信息。

  • 如何获取新数据以响应React路由器使用Redux进行更改?
  • 这是使用redux删除项目的正确方法吗?
  • 响应在React路由器中的路由转换来触发Redux操作
  • 使用ES6发电机的Reduce-saga与使用ES2017asynchronous/等待的redux-thunk的优点/缺点
  • 雷德克斯是不是光荣的全球状态?
  • 如何使用Redux的Immutable.js?
  • 在redux存储中更新嵌套的数据
  • 如何在Redux应用程序中dynamic加载用于代码拆分的reducer?
  • 如何同步Redux状态和URL哈希标签参数
  • 如何构buildRedux组件/容器
  • 我应该何时将Redux添加到React应用程序?