Understanding Redux: A Guide with Example Code

What is Redux?

Redux centralizes an application's state in a single place called the store. Components in the application can access this state, modify it using actions, and control how the state changes using reducers. The core principles of Redux are:

1. Single Source of Truth: The state of the entire application is stored in a single object called the store.
2. State is Read-Only: The only way to change the state is by dispatching actions.
3. Pure Reducers: Reducers are pure functions that describe how the state changes in response to actions.

Redux Core Concepts

1. Store: The central place where all the application’s state lives.
2. Action: An object that describes what should happen (e.g., a user clicks a button).
3. Reducer: A function that takes the current state and an action and returns a new state.

Setting Up Redux

First, you'll need to install Redux and React-Redux (the binding library for React).

npm install redux react-redux

Let's go through an example of a simple counter app to demonstrate how Redux works.

Step 1: Creating Actions

Actions are plain JavaScript objects that describe the type of event that occurred in the application.

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => {
  return {
    type: INCREMENT,
  };
};

export const decrement = () => {
  return {
    type: DECREMENT,
  };
};

Here we have two actions: increment and decrement, which correspond to the actions we want to perform in the app.

Step 2: Creating Reducers

Reducers specify how the application's state changes in response to actions. A reducer is a pure function that takes the current state and an action and returns a new state.

// reducer.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0,
};

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

Here, we have a reducer that updates the count in the state based on the dispatched action type.

Step 3: Creating the Store

The store is the central hub that holds the state. We create the store using the createStore function from Redux.

// store.js
import { createStore } from 'redux';
import { counterReducer } from './reducer';

const store = createStore(counterReducer);

export default store;

Step 4: Connecting Redux to React

Next, we use react-redux to connect Redux to our React components. The Provider component from react-redux makes the Redux store available to all the components in your app.

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

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

Step 5: Connecting React Components to Redux State

To interact with the Redux store in a component, we use the useSelector and useDispatch hooks.

• useSelector: To access the state.
• useDispatch: To dispatch actions.

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector((state) => state.count); // Access the current state
  const dispatch = useDispatch(); // Dispatch actions

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

This component renders the current count from the Redux store and provides buttons to dispatch increment and decrement actions.

Final Step: Rendering the Counter Component

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};

export default App;

Conclusion

In this article, we covered the basics of Redux and walked through a simple counter application. Redux is a powerful state management tool that centralizes your application's state and makes it predictable, especially for large applications.

By following these steps, you can integrate Redux into your React applications and start managing your app's state efficiently.