Redux:未捕获错误:操作可能没有未定义的“ type”属性。你拼错了常量吗?

时间:2019-12-18 15:38:01

标签: redux react-redux redux-persist redux-actions redux-store

我决定分拆我的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的{​​{1}},我认为这是一个重组问题。

谢谢!

更新

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

来自我的减速器:

type

我对redux工具的状态反馈:

您可以看到case actionTypes.users.IS_LOGGED_IN: return Object.assign({}, state, { users: { isLoggedIn: true } }); 对象next state获得了另一个users对象,该对象嵌套在原始对象中并带有正确的有效载荷! enter image description here

1 个答案:

答案 0 :(得分: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;
  }
}