Store Setup

In Redux, only one store is created and initialized by the createStore() method. Let’s open our index.js file and create the store:

import { createStore } from 'redux';

const reducer = (state, action) => state;
const store = createStore(reducer);

window.store = store;

Although the createStore() function can receive a number of parameters, only the reducer function is required. In our example, the reducer returns to the same state regardless of the action.

To make things more interesting, we can provide a default state to the store. This is useful when learning, but this feature is generally applied during server rendering. During server rendering we can precalculate the state of the application on the server and create the store with the precalculated state of the client. We provide an initial state as follows:

import { createStore } from 'redux';

const initialState = {
  recipes: [{
    name: 'Omelette'
  }],
  ingredients: [{
    recipe: 'Omelette',
    name: 'Egg',
    quantity: 2
  }]
};

const reducer = (state, action) => state;
const store = createStore(reducer, initialState);

window.store = store;

In the last line, we make the store globally available by defining it as a property of the global window object.