Redux - The Global State Pattern - Step by Step
Tags: react, designpatterns, webdev, javascript
Published: 2023-11-18 17:02:33

Redux also solves the similar problem of Prop drilling that we discussed in previous post.

Let's break down the code step by step guide to use redux:

### Step 1: Install Redux

```bash
npm install redux react-redux
```

This command installs the necessary packages for using Redux and integrating it with React.

### Step 2: Create Redux Actions and Reducer

#### actions.js

```jsx
// actions.js
export const increment = () => ({ type: 'INCREMENT' });
```

In `actions.js`, we define an action creator function `increment` that returns an action object with the type `'INCREMENT'`. Actions are payloads of information that send data from your application to your Redux store.

#### reducer.js

```jsx
// reducer.js
const initialState = { count: 0 };

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

export default counterReducer;
```

In `reducer.js`, we create a Redux reducer function `counterReducer`. Reducers specify how the application's state changes in response to actions. Here, it handles the `'INCREMENT'` action by incrementing the `count` property in the state.

### Step 3: Create Redux Store

#### store.js

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

const store = createStore(counterReducer);

export default store;
```

In `store.js`, we create the Redux store using `createStore` from Redux, passing in our `counterReducer`. The store is where the state of the application is kept.

### Step 4: Wrap App with Redux Provider

#### index.js

```jsx
// index.js
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')
);
```

In `index.js`, we use the `Provider` component from `react-redux` to wrap the top-level component (`App`). This makes the Redux store accessible to all components in the application.

### Step 5: Connect Components to Redux Store

#### App.js

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

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

  return (
    <div>
      <Counter count={count} increment={() => dispatch(increment())} />
    </div>
  );
};

export default App;
```

In `App.js`, we use the `useSelector` hook to get the `count` from the Redux store. The `useDispatch` hook provides the `dispatch` function, which is then used to dispatch the `increment` action when the `Counter` component calls the `increment` function.

### Step 6: Updated Counter Component

#### Counter.js

```jsx
// Counter.js
import React from 'react';

const Counter = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;
```

In `Counter.js`, we have a simple functional component that receives `count` and `increment` as props. Clicking the "Increment" button triggers the `increment` function received from the `App` component, which dispatches the `'INCREMENT'` action.

This complete example demonstrates the setup and usage of Redux in a React application, providing a centralized state management solution.

> "Your feedback and ideas are invaluable – drop a comment, and let's make this even better!"

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: [Linkedin Profile](https://www.linkedin.com/in/kurmivivek295/)