结构更好的 Redux 状态答案

【问题标题】：Redux state with better structure结构更好的 Redux 状态
【发布时间】：2017-02-09 16:52:45
【问题描述】：

我有以下 react-redux 状态：

{
  response: {
    json: [],
    waitingForResponse: false,
    communicationError: false,
    searchButtonDisabled: true
  },
  routing: {
      ...
    }
  }
}

我想要一个结构更好的状态，像这样：

{
  app: {
      home: {
          searchButtonDisabled: true
      },
      warning: {
          waitingForResponse: false,
          communicationError: false
      },
      rest: {
          json: [],
          httpStatus: 200
      }
  },

  routing: ...
}

我想我需要对商店定义做一些魔术。我当前的 App.js 文件如下所示

const store = createStore(
    combineReducers({
        response: reducer,
        routing: routerReducer
    }),
    composeEnhancers(applyMiddleware(thunk))
);

构建这种结构是否有意义，或者它只会让我的代码更复杂而没有任何额外的好处？

如果这不是一个好主意，那么我可以在原始属性的名称之前添加一些前缀：

{
  response: {
    restJson: [],
    restHttpStatus: 200,

    warningWaitingForResponse: false,
    warningCommunicationError: false,

    homeSearchButtonDisabled: true
  },
  routing: {
    locationBeforeTransitions: {
      pathname: '/hello/',
      ...
    }
  }
}

构建更大的状态组件的最佳实践是什么？

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

从长远来看，规范化（尽可能保持平稳）将使您的生活更轻松，尽管没有硬性规定。

关于它的官方文档： http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

马克·埃里克森已经在上面写了很多好东西： https://hashnode.com/post/what-are-the-best-practices-when-normalizing-redux-data-cive6wc8b08aj3853mvjpfsh1

【讨论】：

嘿，谢谢！很高兴看到我写的东西对人们有用:)