Why do I get “Reducer […] returned undefined during initialization” despite providing initialState to createStore()?

Question

I had set InitialState in my redux createStore method ,and I corresponding InitialState as second arguments

I got a error in browser:

Un         


        

Answer 1

as per the documentation of redux: https://redux.js.org/basics/reducers

you need to return state out side of switch function like this:

 function posts(state=initialState,action) {
  switch (action.type) {
    case INVALIDATE_SUBREDDIT:
      return state.merge({
        didInvalidate: true
      })
    case REQUEST_POSTS:
      return state.merge({
        isFetching: true,
        didInvalidate: false
      })
    case RECEIVE_POSTS:
      return state.merge({
        isFetching: false,
        didInvalidate: false,
        items: action.posts,
        lastUpdated: action.receivedAt
      })
    default:
      return state 
    }

//here you should put the return state
return state
}

Answer 2

When your reducers are called for the first time, state is undefined. You must then return the initial state (that's what the error message is telling you). The usual way of defining the initial state value is to set a default value for the state parameter:

function postsBySubreddit(state = {}, action) {}

You have an initial state in the posts function but it is not called during initialization.

Answer 3

Also, make sure that you are returning the default state last in your reducer. Sometimes you can forget to make sure this is the default for your switch statement (when refactoring and moving around code).

...
 default:
  return state

Answer 4

I had the same error but I didn't include a default case

function generate(state={} ,action) {
  switch (action.type) {
    case randomNumber:
      return {
        ...state,
        random: action.payload
      }   
    default: // need this for default case
      return state 
   }
}

Answer 5

tl;dr

Make sure that:

• You actually pass data to your reducer via the action/action creator!
• The reducer doesn't return undefined.

Example

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_DATA':
      debugger // Place a breakpoint for investigation
      const result = update(state, {$set: action.data});
      // `result` is `undefined` if `action.data` is too
      return result;
    default:
      return state;
  }
}

In this case, if you accidentally pass undefined to action.data via your action creator then react-addons-update will return the undefined that came from that variable. Since this overwrites the whole reducer state it will return that undefined that will trigger the error.

Debugging

You can debug this by examining these places:

• Where the reducer creates the new state. Place a breakpoint into that part to make sure you don't receive or return undefined there.
• Where the data is passed to the action creator.

Answer 6

I just hit this same snag because I accidentally redefined state inside my reducer:

const initialState = {
  previous: true,
  later: true
}

const useTypeReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_USE_TYPES':
      let state = Object.assign({}, state);   // DON'T REDEFINE STATE LIKE THIS!
      state[action.use] = !state[action.use];
      return state;

    default:
      return state;
  }
}

export default useTypeReducer;

To fix the problem I needed to refrain from redefining state:

const initialState = {
  previous: true,
  later: true
}

const useTypeReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_USE_TYPES':
      let _state = Object.assign({}, state);   // BETTER
      _state[action.use] = !state[action.use];
      return _state;

    default:
      return state;
  }
}

export default useTypeReducer;