How to use Redux in the React Application

In the previous article, we discuss What is React Redux and its Components i.e. What-is-React-Redux-Advantage-of-Redux

Now in this article, we see How redux use in the React application step by step. Let take an example to discuss briefly.

Step 1: We have to create an application using the following command, run npm create-react-app <project name> and after it did change the directory to the project folder and run the application on the browser, run npm start

Step 2: After that at the prompt install the library of Redux, run npm install redux react-redux, and use code editor open the project in that edit App.js file for adding some design to the application.

import React from 'react';

const Counter = (props) => (
    <div>
        <h2>Counter: </h2>
        <input type='button' value='Increase' onClick={props.increase}/> 
        <input type='button' value='Decrease' onClick={props.decrease}/>
    </div>
);
const App = () => (
    < Counter />
);
export default App;

Step 3: Import the library to the project, write code in App.js file i.e.

            import{createStore, combineReducer} from Redux;

            import{Provider, Connect} from React-Redux;

Step 4: As we discuss in the previous article about Component of Redux, we write code for all three i.e. store, action, and Reducer according to their working. The store is used to hold all the data for the application. Action is used to pass the information or command in the form of action and Reducer is used to create a new state according to the previous existing state and inform the store.

// Store
const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

// Actions 
const ADD_NUMBER = 'add_number';
const SUBTRACT_NUMBER = 'subtract_number';
const addAction = () => ({
    type: ADD_NUMBER,
    payload: 1,
});
const subtractAction = () => ({
    type: SUBTRACT_NUMBER,
    payload: 2,
});

// Reducers
const mathReducer = (state = {number: 0}, action) => {
    if (action.type === ADD_NUMBER) {
        return {...state, number: state.number + action.payload};
    }
    else if (action.type === SUBTRACT_NUMBER) {
        return {...state, number: state.number - action.payload};
    }
    return state;
};
const rootReducer = combineReducers({
   math: mathReducer,
});

Step 5: At last we use 2 arrow function i.e. mapStateToProps and mapDispatchToProps. we want to dispatch some actions in our redux store we have to use one function and one component from ‘react-redux’ library such as connect and provider.

In connect Function, it creates a container component-based and returns that component. We can pass mapStateToProps function in the connect function, as it automatically receives the state from store and return an object and pass that a Props in the React component. Whereas, dispatch function mainly used to modify the state as an action.

// mapStateToProps
const mapStateToProps = (state => {
    return {
        number: state.math.number,
    };
});
// mapDispatchToProps
const mapDispatchToProps = dispatch => ({
    add: () => dispatch(addAction()),
    subtract: () => dispatch(subtractAction()),
});

Finally, in the App function, we used the Provider component and passed the store as a prop.