Redux - The Global State Pattern - Step by Step

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

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

// 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

// 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

// 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

// 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

// 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

// 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