when combining two contrived reducers and dispatching an action I get a function from getState() from within the store.subscribe callback instead of the state object. If I supply only a single reducer to createStore I get a state object as expected.
The result of getState()
function combination() {
var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var action = arguments[1];
if (sanityError) {
throw sanityError;
}
if (process.env.NODE_ENV !== 'production') {
var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
if (warningMessage) {
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__utils_warning__["a" /* default */])(warningMessage);
}
}
var hasChanged = false;
var nextState = {};
for (var i = 0; i < finalReducerKeys.length; i++) {
var key = finalReducerKeys[i];
var reducer = finalReducers[key];
var previousStateForKey = state[key];
var nextStateForKey = reducer(previousStateForKey, action);
if (typeof nextStateForKey === 'undefined') {
var errorMessage = getUndefinedStateErrorMessage(key, action);
throw new Error(errorMessage);
}
nextState[key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
return hasChanged ? nextState : state;
My reducers:
session reducer
export const session = (state = {
hasSession: false
}, action) => {
let newState = {}
switch(action.type) {
case "USER_LOGGED_IN" :
newState = Object.assign({}, state, {
hasSession: true
})
break
default:
newState = state
}
return newState
}
test reducer
export const test = (state = {
foo: false
}, action) => {
let newState = {}
switch(action.type) {
case "TEST_FOO" :
newState = Object.assign({}, state, {
foo: true
})
break
default:
newState = state
}
return newState
}
And here I have the createStore and subscribe:
import reducers from './reducers'
const store = createStore(reducers)
store.subscribe(() => {
console.log('State: ', store.getState().toString())
})
store.dispatch({
type: 'TEST_FOO'
})
Combining the reducers:
import { combineReducers } from 'redux'
import { session } from './session'
import { test } from './test'
const reducers = () => combineReducers({
session: session,
test: test
})
export default reducers
You're combining the reducers within a function, so that makes perfect sense that it's doing that. Unwrap it from a function and it will work.
@timdorr Thank you so much!! Still getting used to the new es6 syntax and completely missed that!
Most helpful comment
You're combining the reducers within a function, so that makes perfect sense that it's doing that. Unwrap it from a function and it will work.