如何正确管理 redux 状态？

Question

我正在寻找在特定情况下管理 redux 状态的最佳实践方法：

我有一个使用内容编辑器编辑帖子的应用程序，应用程序状态如下所示：

{
  posts: [
    {
      id: 123,
      blocks: [
        {
          setting1: 'fuzz',
          setting2: 'bar',
          ...
        }
      ],
      ...
    },
    ...
  ],

  activeBlock: {
    setting1: 'fuzz',
    setting2: 'bar',
    ...
  }
}

这实际上是我想进入的状态结构。

此时我的结构如下：

{
  posts: [
    {
      id: 123,
      activeBlockIndex: 0,
      blocks: [
        {
          setting1: 'fuzz',
          setting2: 'bar',
          ...
        }
      ],
      ...
    },
    ...
  ]
}

而且我有一个用于帖子和内容块的通用缩减器。重要的是要提到 Content Editor 组件非常复杂，并且有很多深入的子组件。它似乎没问题，而且有效。但是我有一个问题：我必须在 Content Editor 的组件中指定这么多关于帖子的信息，例如：postId，块索引。我认为这不太好，因为 Content Editor 组件的主要职责就是编辑内容，无论它存储在何处。

我想重构我的应用程序，这样 Content Editor 的组件将仅包含 state.activeBlock 的参考，而其他组件仅用于管理 state.posts 的帖子和区块。（问题中结构的第一个变体）

换句话说，我正在寻找一种在 reducers 级别（或其他地方，我不知道）将状态分支 state.activeBlock 同步到 state.posts 的方法。

非常感谢任何建议。

顺便说一句，我说的清楚吗？或者应该以更详细的方式重写问题？

Answer 1

我不确定我是否完全理解您的要求，但是如果您希望每个示例有多个 "areas" 状态，您可以使用 combineReducers。例如store.js

import thunkMiddleware from 'redux-thunk'
import { createStore, combineReducers, applyMiddleware } from 'redux'

import postsReducer from './reducers/postsReducer'
import activeBlockReducer from './reducers/activeBlockReducer'

const reducers = {
    posts: postsReducer,
    activeBlock: activeBlockReducer
}

const reducer = combineReducers(reducers)
const store = createStore(
    reducer,
    applyMiddleware(
        thunkMiddleware
    )
)

export default store

在 mapStateToProps 中，您可以使用 state.posts[0] 和 state.activeBlock.setting1 连接到您的组件。

如何正确管理 redux 状态？

How to proper manage redux state?

reactjs

redux

react-redux