I am using repo from to implement into my existing app. However, in my existing app it contains various reducers with its own particular initialState. In the repo, the initialState is in the main.js

const initialState = {
    regionData: statesData,
    emptyRegions: [],
    sortState: { key: 'regionName', direction: 'ASC' }
};

const store = createStore(rootReducer, initialState);

I separate out the reducers in the repo ( without using the index.js to bine 3 of them ) so I can add them into my existing code.

const reducers = {
    User: require('../reducers/User.js'),
    Alert: require('../reducers/Alert.js'),
    Auth: require('../reducers/Auth.js'),
    Header: require('../reducers/Header.js'),
    PasswordPolicy: require('../reducers/PasswordPolicy.js'),
    AuditTrail: require('../reducers/AuditTrail.js'),
    StoragePolicy: require('../reducers/StoragePolicy.js'),
    DragAndDrop: require('../reducers/DragAndDrop.js'),
    UserProfile: require('../reducers/UserProfile.js'),
    emptyRegions: require('../reducers/map/emptyRegions.js'), //here is it
    regionData: require('../reducers/map/regionData.js'), //here is it
    sortState: require('../reducers/map/sortState.js'), //here is it
    Storage: require('./storage/Storage.js'),
    router: routerStateReducer
};
module.exports = bineReducers(reducers);

I have a file to bine all the reducers and each of their initialstate(which in the same file with the particular reducer)

stores/index.js

module.exports = function(initialState) {
const store = redux.createStore(reducers, initialState,

    pose(reduxReactRouter({ createHistory }), window.devToolsExtension ? window.devToolsExtension() : f => f)
)

if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
        const nextReducer = require('../reducers')
        store.replaceReducer(nextReducer)
    })
}
return store
}

I tried to put the initiateState into sortState.js but it is not working. The data do not show up. It must be something that from the author's repo

const store = createStore(rootReducer, initialState);

that set the initialState into the application state.

Please enlighten me. Thanks

I am using repo from https://github./caspg/simple-data-table-map to implement into my existing app. However, in my existing app it contains various reducers with its own particular initialState. In the repo, the initialState is in the main.js

const initialState = {
    regionData: statesData,
    emptyRegions: [],
    sortState: { key: 'regionName', direction: 'ASC' }
};

const store = createStore(rootReducer, initialState);

I separate out the reducers in the repo ( without using the index.js to bine 3 of them ) so I can add them into my existing code.

const reducers = {
    User: require('../reducers/User.js'),
    Alert: require('../reducers/Alert.js'),
    Auth: require('../reducers/Auth.js'),
    Header: require('../reducers/Header.js'),
    PasswordPolicy: require('../reducers/PasswordPolicy.js'),
    AuditTrail: require('../reducers/AuditTrail.js'),
    StoragePolicy: require('../reducers/StoragePolicy.js'),
    DragAndDrop: require('../reducers/DragAndDrop.js'),
    UserProfile: require('../reducers/UserProfile.js'),
    emptyRegions: require('../reducers/map/emptyRegions.js'), //here is it
    regionData: require('../reducers/map/regionData.js'), //here is it
    sortState: require('../reducers/map/sortState.js'), //here is it
    Storage: require('./storage/Storage.js'),
    router: routerStateReducer
};
module.exports = bineReducers(reducers);

I have a file to bine all the reducers and each of their initialstate(which in the same file with the particular reducer)

stores/index.js

module.exports = function(initialState) {
const store = redux.createStore(reducers, initialState,

    pose(reduxReactRouter({ createHistory }), window.devToolsExtension ? window.devToolsExtension() : f => f)
)

if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
        const nextReducer = require('../reducers')
        store.replaceReducer(nextReducer)
    })
}
return store
}

I tried to put the initiateState into sortState.js but it is not working. The data do not show up. It must be something that from the author's repo

const store = createStore(rootReducer, initialState);

that set the initialState into the application state.

Please enlighten me. Thanks

• javascript
• reactjs
• redux

• 'I have a file to bine all the reducers and each of their initialstate' - could you provide the code where you bine the initialStates? – cathalkilleen Commented Jul 19, 2017 at 8:59
• @cathalkilleen For example, I have one reducer file named User.js, var initialState = { user_credential: { userId: null, username: null, isVerified: false, email: null } }; module.exports = (state = initialState, action = '') => { switch(action.type){ case 'GET_USER': ...... so the initiateState is passed into module.exports = (state = initialState...) I tried in sortState.js but it is not working – Mervyn Lee Commented Jul 19, 2017 at 9:05

2 Answers 2

If you are using bineReducers(…), each Reducer needs to return its initial state on the first run.

const DEFAULT_STATE = { … }
const emptyRegionsReducer = (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    …
    default:
      return state;
  }
}

Have look at line 60 in the redux repo. For each reducer in the object:

const initialState = reducer(undefined, { type: ActionTypes.INIT })

what is triggered right away when bineReducers() is called.

There are two ways to initialize the state in Redux - the docs explain the details very well.

You can set the global initialState by passing it as an optional second argument to the createStore function, like this:

const initialState = { /*..initial state props..*/ }    
const store = createStore(rootReducer, initialState);

OR, you can set the initialState for an individual reducer in the following way (from official docs):

function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT': return state + 1;
        case 'DECREMENT': return state - 1;
        default: return state;
    }
}

Passing state = 0 means that state is given the value 0 within that reducer when it is first initialized. After the counter reducer is initialized, the state value bees whatever counter is in the Redux store. One important thing to note is that you must include the line default: return state; for this method to work.

In your case, it looks like you are using both methods. If you are happy with the initialState that you set within your reducers, then you should remove the initialState argument from createStore:

const store = createStore(rootReducer);