How to set initial state in redux

In Redux, setting the initial state is critical for application state management as it defines the application's starting state. This initial state is typically established when creating the Redux store. The following outlines the specific steps to configure it:

1. Define Initial State

First, define the structure and initial values of the state you need to manage within your application. For example, when developing a to-do application, you might have the following initial state:

javascript
const initialState = {
  todos: [],
  isLoading: false,
  error: null
};

Here, todos is an array storing all to-do items; isLoading is a boolean indicating whether data is being loaded; and error holds potential error information.

2. Create Reducer

Create one or more reducer functions to specify how the application state changes based on actions. The reducer function receives the current state and an action, returning the new state.

javascript
function todoReducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    case 'SET_LOADING':
      return {
        ...state,
        isLoading: action.payload
      };
    case 'SET_ERROR':
      return {
        ...state,
        error: action.payload
      };
    default:
      return state;
  }
}

In this todoReducer, we handle three action types: adding a to-do item, setting loading state, and setting error information. Note that we set the default value for state as initialState in the function parameters, which is how to configure the initial state within a reducer.

3. Create Store

Use Redux's createStore method to create the store and pass the reducer created above to it:

javascript
import { createStore } from 'redux';

const store = createStore(todoReducer);

By doing this, when your application first launches, the Redux store initializes, and the state parameter in todoReducer defaults to initialState. Consequently, the application's global state is set to the initial state.

Example Explanation

Suppose you have a button for adding a to-do item; when clicked, you dispatch an ADD_TODO action:

javascript
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

This triggers todoReducer, adding a new to-do item to the todos array. Since the initial state is configured in the reducer, before any actions are dispatched, todos is an empty array.

Summary

By setting default parameters in the reducer and using createStore, you can effectively configure and manage the initial state in Redux. This approach is essential for predictable and maintainable application state.