Redux：未捕获错误：操作可能没有未定义的“类型”属性。您是否拼错了常数？

Question

我决定拆分我的 redux 存储——现在代表逻辑存储桶，即

users, ui

等。

这些文件各自包含每个类别的初始状态、操作类型和减速器：

ui 减速器文件:

/*./reducers/ui/index' reducer for ui */

/* initial state */
export const uiStartState = { ui: { modalActive: false } }

/* action types */
export const actionTypes = {
    ui: { MODAL_ACTIVE: 'MODAL_ACTIVE' },
    ui: { MODAL_INACTIVE: 'MODAL_INACTIVE' },
}

/* reducer(s) */
export default function ui(state = uiStartState, action) {
    switch (action.type) {
        case actionTypes.MODAL_ACTIVE:
            return Object.assign({}, state, { ui: { modalActive: true } });
        case actionTypes.MODAL_INACTIVE:
            return Object.assign({}, state, { ui: { modalActive: false } });

        default:
            return state
    }
};

/* actions */
export const modalStateOn = () => {
    return { type: actionTypes.ui.MODAL_ACTIVE }
}
export const modalStateOff = () => {
    return { type: actionTypes.ui.MODAL_INACTIVE }
}

用户减速器文件：

/*./reducers/users/index' reducer for ui */

/* initial state */
export const usersStartState = { users: { isLoggedIn: false } }

/* action types */
export const actionTypes = {
    users: { IS_LOGGED_IN: 'IS_LOGGED_IN' },
    users: { IS_LOGGED_OUT: 'IS_LOGGED_OUT' },
}

/* reducer(s) */
export default function users(state = usersStartState, action) {
    switch (action.type) {
        case actionTypes.users.IS_LOGGED_IN:
            return Object.assign({}, state, {
                users: { isLoggedIn: true }
            });
        case actionTypes.users.IS_LOGGED_OUT:
            return Object.assign({}, state, {
                users: { isLoggedIn: false }
            });
        default:
            return state
    }
};

/* actions */
export const logInUser = () => {
    return { type: actionTypes.users.IS_LOGGED_IN }
}
export const logOutUser = () => {
    return { type: actionTypes.users.IS_LOGGED_OUT }
}

这是我的商店：

import { applyMiddleware, combineReducers, createStore } from 'redux'

/* imported reducers */
import ui from './reducers/ui/index'
import users from './reducers/users/index'

import { composeWithDevTools } from 'redux-devtools-extension'
import { persistStore } from 'redux-persist';

import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'

var rootReducer = combineReducers({
    ui,
    users
})

export default () => {
    let store;
    const isClient = typeof window !== 'undefined';
    if (isClient) {
        const { persistReducer } = require('redux-persist');
        const storage = require('redux-persist/lib/storage').default;
        const persistConfig = {
            key: 'primary',
            storage,
            whitelist: ['isLoggedIn', 'modalActive'], // place to select which state you want to persist

        }
        store = createStore(
            persistReducer(persistConfig, rootReducer), {
                ui: { modalActive: false },
                users: { isLoggedIn: false }
            },
            composeWithDevTools(applyMiddleware(
                thunkMiddleware,
                createLogger({ collapsed: false })
            ))
        );
        store.__PERSISTOR = persistStore(store);
    } else {
        store = createStore(
            rootReducer, {
                ui: { modalActive: false },
                users: { isLoggedIn: false }
            },
            composeWithDevTools(applyMiddleware(
                thunkMiddleware,
                createLogger({ collapsed: false })
            ))
        );
    }
    return store;
};

所以从

actions

中取出我的

users

：

export const logInUser = () => {
    return { type: actionTypes.users.IS_LOGGED_IN }
}
export const logOutUser = () => {
    return { type: actionTypes.users.IS_LOGGED_OUT }
}

不知道为什么错误说我没有名为

key

的

type

，我认为这是一个重组问题。

提前致谢！

更新

我想知道问题是否是我错误地合并了新状态？

来自我的减速机：

case actionTypes.users.IS_LOGGED_IN:
  return Object.assign({}, state, {
         users: { isLoggedIn: true }
         });

我从 redux 工具得到的状态反馈：

您可以看到

next state

users

对象获得了另一个

users

对象，该对象嵌套在具有正确负载的原始对象中！

Answer 1

您的用户操作类型必须采用以下格式：

export const actionTypes = {
  users: { IS_LOGGED_IN: "IS_LOGGED_IN", IS_LOGGED_OUT: "IS_LOGGED_OUT" }
};

使用您的代码，

actionTypes.users.IS_LOGGED_IN

将是

undefined

，因为您在同一个对象中具有相同的键，并且它将被替换。这就是 redux 抱怨的原因。

UI 操作类型必须是：

export const actionTypes = {
  ui: { MODAL_ACTIVE: "MODAL_ACTIVE", MODAL_INACTIVE: "MODAL_INACTIVE" }
};

也许您可以将所有操作类型保留在一个对象中，如下所示：

export const actionTypes = {
  users: { IS_LOGGED_IN: "IS_LOGGED_IN", IS_LOGGED_OUT: "IS_LOGGED_OUT" },
  ui: { MODAL_ACTIVE: "MODAL_ACTIVE", MODAL_INACTIVE: "MODAL_INACTIVE" }
};

更新：关于您的问题合并状态：

你可以这样尝试吗？

export default function users(state = usersStartState, action) {
  switch (action.type) {
    case actionTypes.users.IS_LOGGED_IN:
      return {
        ...state,
        users: {
          ...state.users,
          isLoggedIn: true
        }
      };
    case actionTypes.users.IS_LOGGED_OUT:
      return {
        ...state,
        users: {
          ...state.users,
          isLoggedIn: false
        }
      };
    default:
      return state;
  }
}