CODEWITHSUNDEEP
javascriptreactjsredux
D.Kenny
D.Kenny

Reputation: 121

The previous state received by the reducer has unexpected type of "Function"

I want to pass the stored redux value to the web page, and display it. But I always get this error 

The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "session", "user", "form"
warning @ bundle.js:21260
combination @ bundle.js:21220
createStore @ bundle.js:20522
configurationStore @ bundle.js:34355
(anonymous) @ bundle.js:26863
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:26734
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:70
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:47
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
bundle.js:35708 Uncaught TypeError: Cannot read property 'type' of undefined
    at sessionReducer (bundle.js:35708)
    at combination (bundle.js:21230)
    at createStore (bundle.js:20522)
    at configurationStore (bundle.js:34355)
    at Object.<anonymous> (bundle.js:26863)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:26734)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:70)
    at __webpack_require__ (bundle.js:20)

So this is my redux store:

function todos(state = [], action){
  switch (action.type) {
    case FETCH_CARS:
      return state.concat([action.text]);
    case GET_USER:
      return state.concat([action.text]);
    default:
      return state;

  }
}
const store = createStore(todos, 'Redux Store');
export default function configurationStore(initialState) {
  return createStore(
    todos,
    rootReducer,
    initialState,
    applyMiddleware(thunk)
  );
}
store.dispatch({
  type: FETCH_CARS,
text: 'Redux store'})
store.dispatch({
  type: GET_USER,
text: 'GET_USER'})

and this is my initial state:

export default {
  user: '',
  email: '',
  first_name: '',
  last_name: '',
  session: !!sessionStorage.jwt
}

and here is how I update the state in my reducer

export default function sessionReducer(state = initialState.session, action) {
  switch (action.type) {
    case REGISTER_USER:
      console.log(action.user);
      return {
        ...state,
        user: action.user
      }

    case FACEBOOKLOGIN:
      console.log(action.user);
      return {
        ...state,
        user: action.user
      }
    case GET_USER:
      console.log(action.user);
      return {
        ...state,
        user: action.user
        last_name: action.user.last_name
      }

    case LOGIN_USER:
      return state;

    case LOGIN_SUCCESS:
      browserHistory.push('/');
      return !!sessionStorage.jwt;

    case LOGOUT_USER:
      browserHistory.push('/');
      return !!sessionStorage.jwt;

    default:
      return state;

  }
}

and this is the component where I need to display the value

 getUser() {
      return this.props.user.last_name;
  }


     render (){
    return (
          Hello {this.getUser()}
）
｝

So, I assume that there is something wrong with the initial state for my application. But I have no idea how to fix this issue, can anyone tell me how to solve this issue?

Upvotes: 0

Views: 2496

Answers (1)

Max Sindwani
Max Sindwani

Reputation: 1267

The issue arises from how you're creating your store. You're calling createStore with more arguments than it takes. The method signature is createStore(reducer, [preloadedState], [enhancer]) (https://github.com/reactjs/redux/blob/master/docs/api/createStore.md). You need to use combine to combine rootReducer and todos (http://redux.js.org/docs/api/combineReducers.html).

Upvotes: 1

Related Questions