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

Question

I have decided to break up my redux store—to now represent logical buckets i.e. users, ui etc.
These are the files which each contain the initial state, action types and reducers for each category:
ui reducer file:
/*./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 }
}
users reducer file:
/*./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 }
}
And this is my store:
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;
};
So taking my actions from users:
export const logInUser = () => {
return { type: actionTypes.users.IS_LOGGED_IN }
}
export const logOutUser = () => {
return { type: actionTypes.users.IS_LOGGED_OUT }
}
Not sure why the error is saying I don't have a key with the name type, I assume it's a matter of restructuring.
Thanks in advance!
UPDATE
I am wondering if the problem is I am merging the new state incorrectly?
From my reducer:
case actionTypes.users.IS_LOGGED_IN:
return Object.assign({}, state, {
users: { isLoggedIn: true }
});
My state feedback from redux tools:
You can see the next state the users object gets another users object nested in the orignal with the correct payload!

Answer 1

Your user action types must be in this format:
export const actionTypes = {
users: { IS_LOGGED_IN: "IS_LOGGED_IN", IS_LOGGED_OUT: "IS_LOGGED_OUT" }
};
With your code, actionTypes.users.IS_LOGGED_IN will be undefined, because you have the same key in the same object, and it will be replaced. This is the reason why redux complains.
Also ui action types must be:
export const actionTypes = {
ui: { MODAL_ACTIVE: "MODAL_ACTIVE", MODAL_INACTIVE: "MODAL_INACTIVE" }
};
May be you can keep all your action types in a single object like this:
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" }
};
Update: about your question merging state:
Can you try like this?
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;
}
}