Построение состояния Redux - PullRequest
0 голосов
/ 10 июня 2019

Я новичок в Redux и у меня есть небольшие проблемы с ним, поэтому то, что я сделал до сих пор, вполне может быть ошибочным, но терпите меня.В целом, я хочу очень простое избыточное состояние для моего приложения, только с двумя ключами, «пользователь» и «посадка».У меня все настроено так, что по умолчанию устанавливается состояние «пользователь: {пользователь: ноль}» и «посадка: {посадка: истина}».Мне интересно, почему это так дублируется, и это не просто «пользователь: ноль» и «посадка: правда»?

Мои редукторы:

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", но я консоль, выхожу из состояния в компоненте, включенном в connect, и яя вижу "user: {user: null}" и "landing: {landing: true}".

1 Ответ

0 голосов
/ 10 июня 2019

Первый уровень иерархии в состоянии определяется именем редукторов при вызове 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.Но это будет довольно редко и не будет хорошо масштабироваться, если вам понадобится добавить дополнительные атрибуты в будущем.

...