Redux with React - 与组件共享商店的正确方式 [英] Redux with React - right way to share the store with components

问题描述

来自 Redux 的商店服务最终被 React 应用程序中的各种组件所使用.它公开的方法(如 dispatch、getState 和 subscribe)被各种组件(如容器或展示)使用.

我认为传递此商店服务的方法是一个重要的设计决策.我看到了两种方法，它们是:

1) 通过将 store 作为 prop 传递给所有嵌套级别的每个组件.这不是推荐的.

2) 使用像 react-redux 这样的工具，它在上下文的帮助下，使存储(确切地说是状态和调度)在任何需要的地方可用.

我的问题是:为什么不在需要的地方简单地导入商店.对于基于 SPA 的 React 应用程序，商店将是一个单例.嵌套在任何级别的组件都可以简单地导入商店.为什么我们要采用上述两种方法中的任何一种?

对于任何嵌套级别的组件:我们可以这样做吗

从path/to/store"导入商店；让 MyComponent = () =>{让 state = store.getState();返回 (<div onClick={() =>{store.dispatch({类型:SOME_EVENT"，有效载荷:store.somedata});}}>{state.dataINeedHere}</div>);};导出默认的 MyComponent；

代替

import { connect } from "react-redux";让 MyComponent = ({somedata, onMyAction}) =>{让 state = store.getState();返回 (<div onClick={() =>{onMyAction(somedata);}}>{somedata}</div>);};const mapStateToProps = (状态) =>{返回 {一些数据:state.somedata}}const mapDispatchToProps = (调度) =>{返回 {onMyAction: (输入) =>{派遣({类型:SOME_EVENT"，有效载荷:输入});}}}导出默认连接(mapStateToProps，mapDispatchToProps)(MyComponent)；

解决方案

Redux FAQ 涵盖了这个问题，位于 http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores.

总结:虽然您可以直接导入商店，但您将代码与该商店实现相关联，这会降低其可重用性和测试难度.理想情况下，您自己的代码实际上都不会直接引用商店.连接组件、中间件和 thunked 动作创建者都通过依赖注入接收相关的 dispatch 和 getState 函数引用，使其可重用，并允许轻松模拟行为以进行测试.>

The store service from Redux is what ultimately utilized by various components in a React App. The methods (such as dispatch, getState and subscribe) exposed by it are used by all kinds components (like container or presentational).

I think the approach to pass this store service around is an important design decision. I see two approaches and they are:

1) By passing the store as a prop to every component at all nested levels. This is not the recommended one.

2) Use a tool like react-redux, which with the help of context, makes the store (state and dispatch to be exact) available wherever it is needed.

My questions are: Why not simply import the store wherever it is needed. For an SPA-based React App, store will be a singleton. Components nested at any level can simply import the store. Why should we adopt anyone of the above two approaches?

For a component at any nested level: Can we do this

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;

instead of

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);

解决方案

The Redux FAQ covers this question, at http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores.

Summarizing: while you can directly import a store, you're tying your code to that store implementation, which makes it less reusable and harder to test. Ideally, none of your own code actually ever references the store directly. Connected components, middleware, and thunked action creators all receive the relevant dispatch and getState function references by dependency injection, making them reusable and allowing easy mocking of behavior for testing.

这篇关于Redux with React - 与组件共享商店的正确方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！