时间戳

首页 > 解决方案 > Redux：未捕获的错误：操作可能没有未定义的“类型”属性。你有没有拼错一个常数？

redux - Redux：未捕获的错误：操作可能没有未定义的“类型”属性。你有没有拼错一个常数？

问题描述

我决定拆分我的 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嵌套在原始对象中且具有正确有效负载的对象！ 在此处输入图像描述

标签： reduxreact-reduxredux-persistredux-actionsredux-store

解决方案

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

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

推荐阅读