Question

想象一下，我的反应应用程序中有三个主要部分，其状态完全由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);

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

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

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

Answer 1

这绝对不是反模式。 function reverseLastBackslash($url) { return substr_replace($url, '/', strrpos($url, '\\'), 1); }的全部目的 - mapStateToProps中的第一个参数 - 是提取组件所需的应用程序状态部分。

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

如何在redux商店中组织应用程序状态？

1 个答案: