Redux: Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

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 }
}

不确定为什么错误说我没有名称为 type 的 key，我认为这是重组问题。

提前致谢！

更新

我想知道问题是不是我没有正确合并新状态？

来自我的减速器：

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;
  }
}

Redux: Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

Redux: Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

redux

react-redux

redux-store

redux-actions

redux-persist