DEV Community

Vivek Kurmi
Vivek Kurmi

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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' });
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)