Redux: The initialState argument passed to createStore has unexpected type of "Function".

[fenixwu]

'redux-logger' did not work

When I try to use 'applyMiddleware' for 'redux-logger', an error message occurs.

The initialState argument passed to createStore has unexpected type of "Function".
Expected argument to be an object with the following keys: "counter", "counterFilter"

Here is my code

index.js

import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import App from 'containers/App';
import Reducers from 'reducers/reducers';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';

const middlewares = [thunk];

if (process.env.NODE_ENV === `development`) {
  middlewares.push(createLogger());
}

const store = createStore(
  Reducers,
  applyMiddleware(...middlewares)
);

ReactDom.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);

reducers.js

import { combineReducers } from 'redux';
import Immutable from 'immutable';
import * as Types from 'actions/actionTypes';

let initialState = Immutable.List.of(0);

const counter = (state = initialState, action) => {
  switch (action.type) {
    case Types.COUNTER_INCREASE:
      return state.set(action.index, state.get(action.index) + 1);
    case Types.COUNTER_DECREASE:
      return state.set(action.index, state.get(action.index) - 1);
    case Types.ADD_COUNTER:
      return state.push(0);
    case Types.REMOVE_COUNTER:
      return state.remove(action.index, 1);
    default:
      return state;
  }
};

const counterFilter = (state = Immutable.List.of(), action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default combineReducers({
  counter,
  counterFilter
});

Here's my question

Somehow, I found answer form google.

And change code in 'index.js' from 'Plan A'...

const store = createStore(
  Reducers,
  applyMiddleware(...middlewares)
);

to '// Plan B'

const store = compose(
  applyMiddleware.apply(this, middlewares)
)(createStore)(Reducers);

'redux-logger WORKS, and no error or warning msg.

BUT I Still understand why and how 'Plan B' works

Because most way of using middleware from google is 'Plan A'.

In my situation, it doesn't works.

WHY~~

[markerikson]

Your use of createStore is missing the "initialState" parameter. The correct usage should be:

var store = createStore(reducerFunction, initialState, storeEnhancers);

You're skipping the second argument, so it's trying to interpret the store enhancers as "initialState".

Please see the documentation on createStore for more information: http://redux.js.org/docs/api/createStore.html

[fenixwu]

@markerikson
How could i forget it!!

Thanks a lot.