JC
Jeremy "JC" Ashley
Redux

What is Redux?: State Management in React

What is Redux?: State Management in React
6 min read
#Redux
Table Of Content

In modern web development, state management is a crucial aspect of building dynamic, user-friendly applications. Redux, a popular state management tool, helps developers handle and manage state effectively in complex applications, particularly with React.

State in web development can be thought of as a variable that holds data that will change over time. For example, when you open a modal, the state starts as false (meaning the modal is closed) and becomes true when you open it. This is a simple example of how state can evolve based on user actions.

But what happens when you have many states to manage across different parts of your application? This is where Redux comes in. Redux centralizes your application's state and makes it predictable and easier to debug.

Here’s a deeper dive into the core concepts of Redux and how to use it.

Key Features of Redux

  • Single Source of Truth: All of your state is stored in one centralized store.

    Detailed Explanation: In Redux, all the state of your application is stored in a single store (a JavaScript object). This makes the state predictable and easy to maintain. Instead of managing state separately across different components, you manage everything in one place, and the components can access it as needed. Having a single source of truth also means that the state of your app can be easily debugged or logged, and when something changes, it’s easy to trace where the change originated.

  • Immutability: State is read-only, meaning you can't modify it directly.

    Detailed Explanation: Immutability in Redux means that you never directly modify the state object. Instead, when the state needs to change, you create a new copy of the state with the updated data. This is achieved using reducers (pure functions) that take the current state and an action as input, and return a new state. This ensures that the history of state changes can be tracked, which is important for features like time travel debugging, where you can go back and inspect previous states.

  • Actions: Changes in state are triggered by actions, which are JavaScript objects describing what happened.

    Detailed Explanation: An action is a plain JavaScript object that describes what event took place in your app. For example, when a user clicks a button to increment a counter, you would dispatch an action that looks like { type: 'INCREMENT' }. Actions are the only way to trigger a state change in Redux. They carry the payload of data that will be used to update the state. Actions don’t directly mutate the state but instead inform the reducer about what happened.

  • Reducers: Reducers specify how the state changes in response to an action.

    Detailed Explanation: A reducer is a function that takes the current state and an action as arguments and returns a new state. The reducer doesn’t change the current state directly. Instead, it creates and returns a new state based on the action it received. Think of it as a decision-maker that processes actions and updates the state accordingly. Since reducers are pure functions, they ensure that the same action with the same input always produces the same output, making the state predictable.

  • Dispatch: The dispatch function is used to send actions to the store.

    Detailed Explanation: The dispatch function is how you trigger changes in Redux. Whenever something happens in your app (like a user clicking a button or submitting a form), you use dispatch to send an action to the store. The store then forwards this action to the appropriate reducer to update the state. Dispatch acts as the bridge between the user’s actions and the Redux store.

  • Selectors: Selectors are used to extract and transform state data.

    Detailed Explanation: In Redux, a selector is a function that retrieves a specific piece of data from the store. Instead of accessing the state directly within components, you use selectors to grab the necessary data. Selectors are useful because they keep your components clean and decoupled from the store’s structure. They also allow you to optimize your app’s performance by reusing selectors and preventing unnecessary re-renders.

How Redux Works in Practice

To implement Redux in your React project, you generally follow these steps:

Step 1: Install Redux

To start using Redux, you’ll first need to install it along with the React bindings (react-redux):

npm install redux react-redux

Step 2: Create a Redux Store

The store is the central place that holds the state. Here’s how you can set it up:

import { createStore } from 'redux';
import rootReducer from './reducers'; // Combine all your reducers into one

const store = createStore(rootReducer);

export default store;

Step 3: Define Actions

Actions are objects that represent something that happened in your app. You might have an action for adding a user or for toggling a feature.

// actions.js
export const incrementCounter = () => ({
  type: 'INCREMENT',
});

export const decrementCounter = () => ({
  type: 'DECREMENT',
});

Step 4: Define Reducers

Reducers update the state based on the actions dispatched:

// counterReducer.js
const initialState = {
  count: 0,
};

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;
  }
};

export default counterReducer;

Step 5: Dispatch Actions

In your React components, you can now dispatch actions to modify the state:

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { incrementCounter, decrementCounter } from './actions';

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.counter.count);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(incrementCounter())}>Increment</button>
      <button onClick={() => dispatch(decrementCounter())}>Decrement</button>
    </div>
  );
};

export default Counter;

Step 6: Connect Redux to React

Finally, wrap your application with the Redux provider so that the store is accessible throughout the app:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Conclusion

Redux simplifies state management in complex applications by providing a predictable, centralized store. It gives you the flexibility to manage your state in a structured way, making your application more scalable and maintainable. Understanding the core features of Redux and how it interacts with actions, reducers, and selectors is crucial for leveraging its full potential in your projects.

PS