What is Redux?

Redux is a state management library that helps manage the state of your application in a predictable way. It works by providing a central store to hold the application state and allows you to control how state changes based on actions.

Setting Up Redux in a React App

Let’s walk through setting up Redux in a React application. We’ll create a simple counter app that demonstrates how to use Redux for state management.

1. Install Redux and React-Redux

First, install the necessary packages:

npm install redux react-redux

2. Create a Redux Store

In your project, create a new file called store.js to set up the Redux store:

// store.js 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
import { counterReducer } from './reducers/counterReducer'; 

const store = createStore(counterReducer); 

export { store, Provider };

In this file, we create a Redux store using the createStore function and provide it with a reducer function (counterReducer), which we’ll define next.

3. Define the Counter Reducer

Create a counterReducer function in a file called counterReducer.js:

// counterReducer.js
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; 
  } 
};

The reducer function defines the initial state and how the state should change based on different action types (INCREMENT and DECREMENT).

4. Create Actions

Create a file called actions.js to define the actions:

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

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

5. Connect Redux to React

To connect Redux to your React components, use the Provider component from react-redux and wrap your application with it:

// 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') 
);

6. Access Redux State in React Components

To access the Redux state and dispatch actions in a React component, use the useSelector and useDispatch hooks:

// 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); 
   const dispatch = useDispatch(); 

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

export default Counter;

Here, the useSelector hook is used to access the current count from the Redux state, and the useDispatch hook allows us to dispatch actions (increment and decrement) to modify the state.

Conclusion

Integrating Redux with React provides a robust and structured approach to managing application state. By centralizing state in a Redux store, you can ensure that your application state is predictable and easily managed. The combination of React and Redux offers a powerful way to build complex, data-driven applications with ease.

Reference

• Why Redux Toolkit is How To Use Redux Today
• Introduction to React Hook