我有一个连接的简单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;
};
如果您需要查看如何使用Redux配置路由器
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
const store = createStoreWithMiddleware(reducers);
var Route = (
<Provider store={store}>
<Router history={createBrowserHistory()}>
{Routes}
</Router>
</Provider>
);
更新
看起来如果我在连接中省略了自己的调度(当前上面显示了fetchUsers),我将获得免费调度(只是不确定这是否带有异步操作的设置通常可以正常工作)。人们会混合搭配还是全部还是一无所有?
[mapDispatchToProps]
虽然您可能
dispatch
成为的一部分dispatchToProps
,但我建议您避免在组件内部访问store
或dispatch
直接访问。似乎最好在connect的第二个参数中传入绑定动作创建者来为您服务dispatchToProps
请参阅我在此处https://stackoverflow.com/a/34455431/2644281发布的示例,该示例说明如何传递“已经绑定的动作创建者”,这样您的组件就无需直接了解或依赖商店/发货。
抱歉,简短。我将更新瓦特/更多信息。