Question

我是Redux的新手，并且对它有一些麻烦，所以到目前为止我所做的很可能是错误的，但请多多包涵。总的来说，我想为我的应用提供一个非常简单的redux状态，它只有两个键：“用户”和“着陆”。我进行所有设置的方式是将状态默认为“用户：{user：null}”和“着陆：{landing：true}”。我想知道为什么要这样重复，而不仅仅是“ user：null”和“ landing：true”？

我的减速器：

const initialUserState = {
    user: null
};
const initialUiState = {
    landing: true
};

export function userReducer(state, action){
    if (typeof state === "undefined"){
        return initialUserState;
    }
    switch(action.type){
        case SIGN_IN: 
            return {...state, user: action.userName};
        case SIGN_OUT: 
            return {...state, user: null};
        default: 
            return state;
    }
}

export function uiReducer(state, action){
    if (typeof state === "undefined"){
        return initialUiState;
    }
    switch(action.type){
        case LANDING: 
            return {...state, landing: true};
        case NOT_LANDING: 
            return {...state, landing: false};
        default: 
            return state;
    }
}

以及减速器的组合：

import {userReducer, uiReducer} from "./reducers";
import {combineReducers} from "redux";

export default combineReducers({
    user: userReducer, 
    landing: uiReducer
});

同样，我希望只看到“ user：null”和“ landing：true”，但我正在控制台注销连接在连接中的组件中的状态，并且看到了“ user：{user ：null}”和“着陆：{landing：true}”。

Answer 1

状态的第一个层次结构级别由对combineReducers的调用中的化简器名称定义。分隔每个单个化简器负责的子状态是必要的。然后，由相应的约简器完全定义第一层次级别内的状态结构。

在您的情况下，如果您真的只想管理一个值，则可以按以下方式定义减速器：

const initialUserState = null;

export function userReducer(state, action){
  if (typeof state === "undefined"){
    return initialUserState;
  }
  switch(action.type){
    case SIGN_IN: 
        return action.userName;
    case SIGN_OUT: 
        return null;
    default: 
        return state;
  }
}

uiReducer也是如此。但这很不常见，如果将来需要添加更多属性，扩展性就不好。

构造Redux状态

1 个答案: