【问题标题】:How do i access state of one reducer in other in react redux. State flow between reducers and store我如何在 react redux 中访问另一个 reducer 的状态。 reducer 和 store 之间的状态流
【发布时间】:2020-05-30 22:50:49
【问题描述】:

我是 react-redux 的绝对初学者,我观看了很多视频和文章、文档,但无法理解 reducer 之间以及 store 到 reducer 之间的状态如何流动。

我对每个减速器都有这样的状态

const initState = {todos:[]}

cont reducer = (state=initState,action) ....

Reducer 2 同样具有不同的状态

initState2 = {todo:" "}

reducer2 = (state=initState2,action) ...

然后我导入并组合减速器。在这里,我使用了两个不同的减速器,它们具有不同的状态,这是正确的做事方式吗?如果是这样,如果每个reducer都有自己的单独状态,redux怎么能称为单状态。

我们不是在 store 中只有一个 state,所有 reducer 都可以访问它,并且 dispatch action 直接改变 store 的 state,而不是改变 reducer 的 store。感谢任何帮助,这似乎是一个愚蠢的问题,但填补空白确实很重要,许多初学者和我有同样的疑问,请帮忙。谢谢

【问题讨论】:

    标签: javascript reactjs redux react-redux


    【解决方案1】:

    您只需要 1 个 reducer 即可存储您的待办事项。

    如果每个reducer都有自己的,redux怎么叫单态 个人状态。

    应用程序实际上只有 1 个全局存储,用于存储所有应用程序状态。 reducer 返回的是有效存储在 store 中的内容。
    存储的配置是一个map(key-value),其中key在root reducer中定义,value是reducer函数返回的内容。

    您必须以这种方式看待它,该视图是“愚蠢的”,因为它所做的唯一一件事就是通过调度一个动作来告诉应用它想要什么。这个动作只是一个用你给它的字符串标记的事件,以清楚地识别视图想要什么。 reducer 拦截这个动作并相应地更新 store 中的状态。反过来,您的应用程序中的所有组件都可以访问此状态。所以它显然是全球性的。

    在您的示例中,视图只会告诉应用程序,例如:“添加待办事项”。 reducer 将拦截此消息并返回一个包含添加的 todo 的数组。这个返回的数组将被保存在存储中。

    如果你想要一个单独的“待办事项”,这可能是指当前“活动”的待办事项。将其标记为这样将使目的更具表现力。
    这是单一状态,因为你的 root reducer 最终会得到类似的结果:

    {
        "activeTodo": activeTodoReducer
        "todos": todosReducer
    }
    

    您可以在整个应用程序中访问组件中的这些键/值。

    【讨论】:

    • 非常感谢。我现在开始了解redux。那么每个reducer都会维护一个状态,如果我想在reducer2中使用reducer1维护的状态呢?如何访问?
    • @Hem 我需要看看你打算做什么,但有多种方法可以解决这个问题。您可以问自己的问题是:视图能否将该状态(从 reducer 1 返回)作为有效负载发送到 reducer 2?忠告:不要在商店中复制状态,因为您需要使它们保持同步。当一种状态依赖于另一种状态时,您还可以使用中间件,例如 redux-observable,它允许您拦截一个操作,并从那里分派一个或多个新操作(我认为 redux-thunk 实现了相同的功能)。出现新问题时,请随意探索和发布。
    • 我想,我想做的事情可以通过redux-thunk来实现。谢谢你的帮助,你让我很开心。
    【解决方案2】:

    如果每个reducer都有自己的独立状态,redux怎么能称为单状态。

    因为状态没有保存在减速器中。状态只保存在 store 中,并且只有一个 store。这就是为什么称为单一状态。

    创建商店:

    const store = createStore(myBeautifulReducers)
    

    在您的情况下,myBeautifulReducers 将是:

    const myBeautifulReducers = combineReducers({reducer, reducer2});
    

    myBeautifulReducers 将是一个对象,它同时包含 reducer(reducer 和 reducer2)以及您在它们中编写的逻辑(switch 语句等)。

    【讨论】:

      猜你喜欢
      • 2017-04-02
      • 2017-12-31
      • 2017-03-07
      • 2023-03-22
      • 1970-01-01
      • 1970-01-01
      • 2020-10-21
      • 2018-11-15
      • 1970-01-01
      相关资源
      最近更新 更多