Skip to main content

The Redux Store: Bringing Actions and Reducers Together #111

📖 Introduction​

Following our exploration of Redux reducers, this article focuses on the central piece of a Redux application: the store. We will learn what the store is, how to create it, and how it brings actions and reducers together to manage the state of your application.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • Redux actions and reducers.
  • The combineReducers function.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ What the Redux Store Is: Understanding the role of the store in a Redux application.
  • ✅ Creating a Store: How to use the createStore function to create a Redux store.
  • ✅ The Store's API: An overview of the store's getState, dispatch, and subscribe methods.

🧠 Section 1: The Core Concepts of the Redux Store​

The store is the object that brings actions and reducers together. It has the following responsibilities:

  • Holds the application state.
  • Allows access to the state via getState().
  • Allows the state to be updated via dispatch(action).
  • Registers listeners via subscribe(listener).

It's important to note that you will only have a single store in a Redux application.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's create a store for our to-do list application.

2.1 - Creating the Store​

We use the createStore function from the redux library to create a store. The createStore function takes a reducer as its first argument.

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

const store = createStore(rootReducer);

export default store;

In this example, we are passing our rootReducer (which we created with combineReducers in the previous article) to the createStore function.

2.2 - The Store's API​

The store has a few important methods:

  • getState(): Returns the current state tree of your application.
  • dispatch(action): Dispatches an action. This is the only way to trigger a state change.
  • subscribe(listener): Adds a change listener. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed.

Here's how you might use these methods:

import store from './store';
import { addTodo } from './actions';

// Log the initial state
console.log(store.getState());

// Every time the state changes, log it
const unsubscribe = store.subscribe(() => console.log(store.getState()));

// Dispatch some actions
store.dispatch(addTodo('Learn about actions'));
store.dispatch(addTodo('Learn about reducers'));
store.dispatch(addTodo('Learn about the store'));

// Stop listening to state updates
unsubscribe();

💡 Conclusion & Key Takeaways​

In this article, we've learned about the Redux store and how it brings actions and reducers together. We've seen how to create a store with the createStore function and how to use its getState, dispatch, and subscribe methods.

Let's summarize the key takeaways:

  • The store is the object that holds the application state.
  • It allows access to the state, allows the state to be updated, and registers listeners.
  • You will only have a single store in a Redux application.

Challenge Yourself: To solidify your understanding, try to create a simple vanilla JavaScript application that uses a Redux store to manage its state.

➡️ Next Steps​

You now have a solid understanding of the Redux store. In the next article, "Connecting React and Redux with react-redux", we will learn how to connect our Redux store to a React application.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Store: The object that holds the application state in a Redux application.
  • createStore: The function used to create a Redux store.
  • getState: A method on the store that returns the current state.
  • dispatch: A method on the store that dispatches an action.
  • subscribe: A method on the store that registers a listener to be called on state changes.

Further Reading​