如何在 redux store 中组织应用程序状态？答案

【问题标题】：How to organise application state in redux store?如何在 redux store 中组织应用程序状态？
【发布时间】：2016-08-31 01:01:18
【问题描述】：

想象一下，我的 react 应用程序中有三个主要部分，它们的状态完全由 redux 管理（没有本地状态）。 Login、Register 和 View Profile：

我的理解是初始状态应该是这样的：

const initialState = {
  login: {},
  register: {},
  profile: {},
  appUI: {
    menuToggled: false
  }
};


export function mainReducer(state = initialState, action) {
...

然后在我的容器组件中，我将使用 react-redux connect() 提取状态的相关部分：

function select(state) {
  return {
    state: state.login
  };
}

export default connect(select)(Login);

因此，当用户在登录的展示组件中输入用户名、密码等时，全局状态将被更新（使用操作）并最终看起来像这样：

{
  login: {
    username: "foo",
    password: "bar"
  },
  register: {},
  profile: {},
  app: {
    menuToggled: false
  }
};

这是一种有效的方法吗？有效我的意思是我组织应用程序状态的方式，所以如果应用程序有更多的“部分”随着它的增长（想想 crud），我会在 redux 中有更多的字段。我是 react 和 redux 的新手，想避免任何反模式。

【问题讨论】：

我认为将密码保存在商店中并不安全，不是吗？

标签： reactjs redux react-redux

【解决方案1】：

这绝对不是反模式。 mapStateToProps（connect 中的第一个参数）的全部目的是提取组件需要的应用程序状态部分。

我担心的一件事是您的容器组件依赖于登录凭据之类的东西。另外，我不知道您是如何构建减速器的，但我建议您使用 redux 中的 combineReducers 函数。

【讨论】：