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的方法。< / p>

我非常感谢任何建议。

是的，我说的很清楚吗？或者问题应该以更详细的方式重写？

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连接到您的组件。

如何正确管理redux状态？

1 个答案: