CODEWITHSUNDEEP
javascriptreactjsredux
Mervyn Lee
Mervyn Lee

Reputation: 2197

Create initialState on Store with Redux

I am using repo from https://github.com/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 combine 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 = combineReducers(reducers);

I have a file to combine 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,

    compose(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

Upvotes: 3

Views: 4992

Answers (2)

cathalkilleen
cathalkilleen

Reputation: 315

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 becomes 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);

Upvotes: 2

philipp
philipp

Reputation: 16505

If you are using combineReducers(…), 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 combineReducers() is called.

Upvotes: 5

Related Questions