具有更好结构的 Redux 状态

Question

我有以下 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/',
      ...
    }
  }
}

构建更大状态组件的最佳做法是什么？

Answer 1

规范化（尽可能保持平坦）将使您的生活在长期运行中变得更轻松，尽管没有硬性规定。

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

Mark Erikson 已经在上面写了很多好东西： https://hashnode.com/post/what-are-the-best-practices-when-normalizing-redux-data-cive6wc8b08aj3853mvjpfsh1

具有更好结构的 Redux 状态

Redux state with better structure

javascript

reactjs

redux

react-redux