如何正确管理 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、blockIndex。我认为这不太好，因为 Content Editor 组件的主要职责只是 -- 编辑内容，无论它存储在哪里。

我想重构我的应用程序，因此Content Editor 的组件将包含仅对state.activeBlock 的引用以及仅用于管理state.posts 的帖子和块的其他组件。 （问题中结构的第一个变体）

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

我非常感谢任何建议。

顺便说一句，我在说什么清楚吗？还是应该更详细地重写问题？

Answer 1

我不确定我是否完全理解您的要求，但如果您希望每个示例有多个状态“区域”，您可以使用 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 连接到您的组件。