React 应用程序中的各种组件最终使用 Redux 的存储服务。它公开的方法(如dispatch、getState和subscribe)可供所有类型的组件(如容器或展示)使用。
我认为传递商店服务的方法是一个重要的设计决策。我看到两种方法,它们是:
1) 将 store 作为 prop 传递给所有嵌套级别的每个组件。这不是推荐的。
2)使用像react-redux这样的工具,它在上下文的帮助下,使存储(确切地说是状态和调度)在任何需要的地方可用。
我的问题是:为什么不简单地将商店导入到需要的地方。对于基于 SPA 的 React 应用程序,store 将是一个单例。任何级别嵌套的组件都可以简单地导入存储。为什么我们应该采用上述两种方法中的任何一种?
对于任何嵌套级别的组件:我们可以这样做吗
import store from "path/to/store";
let MyComponent = () => {
let state = store.getState();
return (
<div onClick={() => {
store.dispatch({
type: "SOME_EVENT",
payload: store.somedata
});
}}>{state.dataINeedHere}</div>
);
};
export default MyComponent;
而不是
import { connect } from "react-redux";
let MyComponent = ({somedata, onMyAction}) => {
let state = store.getState();
return (
<div onClick={() => {
onMyAction(somedata);
}}>{somedata}</div>
);
};
const mapStateToProps = (state) => {
return {
somedata: state.somedata
}
}
const mapDispatchToProps = (dispatch) => {
return {
onMyAction: (input) => {
dispatch({
type: "SOME_EVENT",
payload: input
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
最佳答案
Redux 常见问题解答涵盖了这个问题,地址为 http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores .
总结:虽然您可以直接导入商店,但您将代码与该商店实现绑定(bind)在一起,这使得它的可重用性降低并且更难以测试。理想情况下,您自己的代码实际上不会直接引用商店。连接的组件、中间件和 thunked 操作创建者都通过依赖项注入(inject)接收相关的 dispatch
和 getState
函数引用,使它们可重用并允许轻松模拟行为以进行测试。
关于reactjs - Redux with React - 与组件共享存储的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36638314/