Confusion with how createStore works in redux

Question

I was learning Redux and came across createStore function. So, as I understood createStore receives 3 parameters:

reducer
initial state
enhancers (for simplicity we will use only middlewares)

But when we use createStore in action we do not pass initial state as the second argument BUT pass reducer with default state like this:

const initialState = {counter:0}
const reducer =(state=initialState, action)=>...

The question is why don't we put the initial state as the second argument but pass initialState to reducer?

Answer 1

I think you are confusing the initial state of a reducer to that of the global state of your app.

Global state simply means that combined state of all the reducers in your app.

For simplicity let's just assume you only have one reducer in your app.

Reducer :

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

So this simple function todos is our reducer which will give us the current state tree, whenever it is run.

So this is our first parameter to createStore.

Initial State :

['Understanding Store']

Let's assume our initial state as an array which contains 1 item as shown above.

This will be our second parameter to createStore.

Now we create our store like this:

import { createStore } from 'redux'

//... code
.
.
.
const store = createStore(todos, ['Understanding Store'])

Now our store is created. Nothing fancy, store is basically an object, which has few methods on it.

One of those methods is dispatch. This method helps in dispatching an action, which will run through our reducer and then update the state.

So when we do this

store.dispatch({
  type: 'ADD_TODO',
  text: 'Learn methods on Store'
})

This will update our state as below:

['Understanding Store','Learn methods on Store']

But when your app grows big, you might want to create different functions (reducers) to manage different parts of your global state.

If we have one more reducer, say counter.js :

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

}

Then to combine our 1st reducer todos and this counter reducer, we have an utility called combineReducer.

rootReducer.js

import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers({
  todos,
  counter
})

Then using createStore, you just do this:

import { createStore } from 'redux'
import rootReducer from './rootReducer.js;

const store = createStore(rootReducer);

There are certain rules that you need to follow while using combineReducers.

Read the rules here