Redux store рендерит кратные состояния. Это нормально?

Question

Я получил состояние, вложенное в состояние, и он имеет много отображенных состояний.

Вы видите из моей фотографии ниже.

Вот мой LoginReducer

import {
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    USER_LOADED,
    AUTH_ERROR
} from '../actions/typeName';

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    loading: true,
    user: null
}
const loginReducer = (state = initialState, action) => {
    const {
        type,
        payload
    } = action;

    switch (type) {
        case USER_LOADED:
            return {
                ...state,
                isAuthenticated: true,
                    loading: true,
                    user: payload
            };
        case LOGIN_SUCCESS:
            localStorage.setItem('token', payload.token)
            return {
                ...state,
                isAuthenticated: true,
                    loading: false
            }
            case AUTH_ERROR:
            case LOGIN_FAIL:
                localStorage.removeItem('token')
                return {
                    ...state,
                    token: null,
                        isAuthenticated: false,
                        loading: true
                }
                default:
                    return {
                        state
                    }
    }
}

export default loginReducer;

А вот и мое действие.

export const LoginAction = (email, password) => async dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const body = JSON.stringify({email, password});
  try {
    const res = await axios.post('/api/admin/login', body, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
    dispatch(loadUser());

  }catch(err){
    const errors = err.response.data.errors;

    dispatch({
      type: LOGIN_FAIL,      
    });

    if(errors) {
      errors.forEach(error => {
        dispatch(NotificationAction(error.msg, 'error'));
      })
    }

  }
}

Если это не нормально и как предотвратить это? Огромное спасибо.

Answer 1

Случай по умолчанию неправильно обработан в вашем редукторе. Вместо этого используйте

switch (type) {
  ...
  default:
    return state;
}

. Если вы вернете { state }, текущее состояние будет перенесено в новый объект с атрибутом состояния, это то, что вы видите в инспекторе.

Answer 2

Это не нормально, обычно мы получаем состояние и определенные в нем редукторы. В вашем случае укажите следующие редукторы

• loginReducer
• messagesReducer

• listUsersReducer и т. Д.

  Можете ли вы предоставить соответствующий файл действий. Я думаю, что путь, которым вы проходите внутри switch (), должен быть action.type вместо самого type.