Redux Fundamentals - Core Concepts (Store, Actions & Reducers)

Screenshot from the tutorial

Understanding Redux Fundamentals: Core Concepts of Store, Actions & Reducers

Redux is a predictable state container for JavaScript applications, often used with libraries like React. In this blog post, we will explore the core concepts of Redux, including the Store, Actions, and Reducers, which are essential for managing application state in a scalable and maintainable way.

What is Redux?

Before diving into the core concepts, let's briefly define what Redux is. Redux is designed to help you manage the state of your application in a single central store, making it easier to reason about your state changes and debug your applications. Redux follows a unidirectional data flow, which simplifies the structure and makes it more predictable.

Core Concepts of Redux

To effectively use Redux, we need to understand three fundamental components: Store, Actions, and Reducers. Let’s take a closer look at each of these concepts.

1. The Store

The Store is the heart of a Redux application. It holds the entire state of the application in a single JavaScript object. This centralized state enables easy access and manipulation of the application state.

Creating a Store

To create a Redux store, you can use the createStore function from the Redux library. Here’s how you can set it up:

import { createStore } from 'redux';

// Initial state
const initialState = {
  count: 0
};

// Reducer function
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// Create store
const store = createStore(counterReducer);

In this example, we create a store using a reducer function (counterReducer) that defines how our state changes in response to actions.

2. Actions

Actions are plain JavaScript objects that represent an intention to change the state. Each action must have a type property, which helps identify what kind of action is being performed. Actions can also have additional properties that carry any necessary data.

Creating Actions

You can define actions as follows:

const incrementAction = {
  type: 'INCREMENT'
};

const decrementAction = {
  type: 'DECREMENT'
};

You can also create action creators, which are functions that return action objects:

const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

3. Reducers

Reducers are pure functions that take the current state and an action, and return a new state. They are the only way to change the state in a Redux store. Reducers must not mutate the existing state; instead, they return a new state object.

Writing a Reducer

Here’s an example of a simple reducer:

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

In this reducer, we handle two action types: INCREMENT and DECREMENT. Depending on the action received, the state is updated accordingly.

Putting It All Together

Now that we understand the core concepts, let’s see how they work together in a simple example:

// Subscribe to store updates
store.subscribe(() => {
  console.log('Current state:', store.getState());
});

// Dispatch actions
store.dispatch(increment()); // Increment the count
store.dispatch(decrement()); // Decrement the count

In this example, we subscribe to the store to log the current state whenever it changes. We then dispatch the increment and decrement actions to update the state accordingly.

Conclusion

Redux is a powerful tool for managing state in JavaScript applications. Understanding its core concepts—Store, Actions, and Reducers—is essential for using Redux effectively. With the knowledge gained from this tutorial, you can start implementing Redux in your applications, ensuring a predictable and maintainable state management solution.

To further explore Redux, consider checking out the official Redux documentation for more advanced features and best practices. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios