The Redux store is the single, centralized object holding an application's entire state tree, providing methods to read the current state, dispatch actions, and subscribe to changes.

Syntax

import { createStore } from 'redux';
const store = createStore(reducer);

Deep Dive Course

A Redux application has exactly one store, created by passing it a root reducer function, typically itself combining several smaller reducers, each responsible for one slice of the overall state, via combineReducers() or the equivalent tooling in Redux Toolkit. The store exposes getState() to read the current state at any moment, dispatch(action) to trigger a state update by running the given action through the reducer, and subscribe(listener) to register a callback that fires after every state change — react-redux's Provider and hooks handle this subscription machinery automatically for React components, so most application code never calls these store methods directly.

1Understanding Store

💡

A Redux application should have exactly one store — rather than creating multiple separate stores for different concerns, split the single store's state into different slices using combineReducers(), or Redux Toolkit's configureStore, keeping one unified source of truth.

editor.html

import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({ counter: counterReducer, todos: todosReducer });
const store = createStore(rootReducer);

console.log(store.getState());

localhost:3000

2Practical Example

Here is a real-world application of Store showing how it is used in production React code.

editor.html

store.dispatch({ type: 'increment' });
console.log(store.getState().counter);

localhost:3000

3Best Practices

Follow these guidelines when working with Store:

1. Create exactly one Redux store for the application, splitting state into different slices via combineReducers() or Redux Toolkit's configureStore, rather than multiple separate stores

2. Read from and dispatch to the store through react-redux's useSelector and useDispatch hooks inside components, rather than calling store.getState()/store.dispatch() directly

3. Prefer Redux Toolkit's configureStore over the older, more manual createStore, since it sets up sensible defaults like the DevTools extension and common middleware automatically

⚠️

Tip: A Redux application should have exactly one store — rather than creating multiple separate stores for different concerns, split the single store's state into different slices using combineReducers(), or Redux Toolkit's configureStore, keeping one unified source of truth.

editor.html

import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({ counter: counterReducer, todos: todosReducer });
const store = createStore(rootReducer);

console.log(store.getState());

localhost:3000

Examples

Example 01Basic Usage

import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({ counter: counterReducer, todos: todosReducer });
const store = createStore(rootReducer);

console.log(store.getState());

Example 02Advanced Example

store.dispatch({ type: 'increment' });
console.log(store.getState().counter);

Best Practices

Create exactly one Redux store for the application, splitting state into different slices via combineReducers() or Redux Toolkit's configureStore, rather than multiple separate stores
Read from and dispatch to the store through react-redux's useSelector and useDispatch hooks inside components, rather than calling store.getState()/store.dispatch() directly
Prefer Redux Toolkit's configureStore over the older, more manual createStore, since it sets up sensible defaults like the DevTools extension and common middleware automatically

Interview Question

Why does a Redux application use exactly one single store, rather than several separate stores for different areas of application state?▼

Hint: Think about what would be lost, in terms of predictability or the ability to reason about the whole application's state at once, with multiple independent stores.

A single, centralized store means the entire application's state exists as one complete, unified object tree at any given moment, which is exactly what allows a single dispatched action to potentially affect multiple different slices of state consistently through one coordinated set of reducers, and lets tools like Redux DevTools capture and display one single, complete, coherent picture of the whole application's state and its history at once. With multiple independent stores instead, there would be no single, unified snapshot of the application's complete state at any given moment, coordinating a change that logically needs to affect two different stores together would become considerably more awkward, and debugging tools would need to somehow reconcile separate, disconnected histories from each store rather than working with one clean, chronological sequence of actions and states. Splitting different concerns into separate reducers, then combining them into that one single store's overall state tree, achieves the organizational separation multiple stores might seem to offer, without sacrificing the benefits of one single, unified source of truth.

Exercises

MediumPractice using Store in a real scenario.

View Solution

import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({ counter: counterReducer, todos: todosReducer });
const store = createStore(rootReducer);

console.log(store.getState());

Frequently Asked Questions

Why does a Redux application use exactly one single store, rather than several separate stores for different areas of application state?▼

Related Functions

reduxreducersactions