React-redux: getState() returns a function when using combineReducers

Created on 7 May 2017  路  2Comments  路  Source: reduxjs/react-redux

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

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.

All 2 comments

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!

Was this page helpful?
0 / 5 - 0 ratings