React-Redux How It's Works ?
Tags: react, javascript, redux, beginners
Published: 2021-12-11 14:18:27

#### How Redux works with React ? Let's see, In this tutorial we trying to learn the concept of react-redux (for beginners), We will be creating a small increment - decrement application using react-redux, Which I think is best example to learn complex concepts like these, So let's start.

-———————————————

First of all create Your React App using `npx create-react-app app-name` and install following decencies :

→ `npm install react-redux redux`

after all installation and creating-app write in command `npm start` to run your application and follow the below steps : -

_important note_: - there is problem with numbering, So please adjust
-———————————————

1.	 Create Folder inside the src called actions, and inside the action folder create file called index.js and Inside that file we will create Actions like INCREMENT / DECREMENT , basically we will called it as **What kind of action to do with** and write following code inside index.js file

```jsx
// .actions/index.js
export const incNumber = () => {
    return {
        type:"INCREMENT"
    }
}
export const decNumber = () => {
    return {
        type:"DECREMENT"
    }
}
export const resetNumber = () => {
    return {
        type:"RESET"
    }
}
```

Here in this file we have created the function which will trigged by an action using `dispatch` method, in this file we have created 3 functions and exported them separately using export keyword, in here `inNumber()` will trigger "INCREMENT" method and so on.

2.	Create another folder in src called `reducers`, and inside reducers folder create file `upDown.js` and `index.js`.  `upDown.js` we will create a functions that will change the state of our application. `upDown.js` file will contain following code.
    

> ***This file will contain How to Do scenario.***
> 

```jsx
//reducer/upDown.js
    const initialState = 0;
    // It is always better to initial our state with 0 or to initialize 
    const changeTheNumber = (state = initialState, action) => {
      switch (action.type) {
        case "INCREMENT":
          return state + 1;
        case "DECREMENT":
          return state - 1;
        case "RESET":
            return state = 0;
        default:
          return state;
      }
    };
    
    export default changeTheNumber;
```

Then inside the `index.js` we will import the the function `ChangeTheNumber` from `upDown.js` file and here we will use `CombineReducers` from redux and will create function `rootReducers` it is most important step , and after creating the `rootReducers` we'll export it, like bellow

```jsx
// ..reducers/index.js
    // Imprting reducer from upDown file 
    import changeTheNumber from "./upDown";
    // Importing combineReducers object 
    import { combineReducers } from "redux";
    
    // Creating RootReducer 
    const rootReducer = combineReducers({
        changeTheNumber
    })
    
    //Exporting rootReducer
    export default rootReducer;
```

3.	In this step we will create a store for our react-redux application, so we will need to install react-redux package into your application using `npm install react-redux` , ( ignore if you already install ) after installation write the following code inside store.js file

```jsx
// src/store.js
    import { createStore } from 'redux'
    
    // Importing RootReducers
    import rootReducer from './reducer/index'
    
    //Creating Store and passing rootreducer
    const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
    
    export default store;
```

and we will *export that store to import inside index.js* to make it global store. So let's how we can make it global store in next step.

4.	Go to you index.js file from src, Here import store which we exported from store.js file and also import Provider from react-redux like below.

```jsx
// index.js
    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import store from "./store";
    import { Provider } from "react-redux";
    
    store.subscribe(() => console.log(store.getState()));
    
    ReactDOM.render(
      <React.StrictMode>
        <Provider store={store}>
          <App />
        </Provider>
      </React.StrictMode>,
      document.getElementById("root")
    );
    
    reportWebVitals();
```

Your index.js file will look like this, here we have wrap our App inside <Provider> and Pass the store={store} as a prop

( You can use redux `devtool` if you want : and add following code to work with `devtool` , It is optional to see reducers inside browsers but makes working with reducers easy )

```jsx
store.subscribe(() => console.log(store.getState()));
```

5.	Final Step : Go to your app.js file and import the functions we created inside `/actions/` file such as `{ decNumber, incNumber, resetNumber }` and create a variable which will hold the state result. we use dispatch method to trigger events like dispatch( functionName() ). after all our app.js file will look like this → 

```jsx
    import "./App.css";
    import {useSelector, useDispatch } from 'react-redux'
    import { decNumber, incNumber, resetNumber } from "./action";
    
    function App() {
    
      const myState = useSelector((state) => state.changeTheNumber )
      const dispatch = useDispatch();
    
      return (
        <div className="App">
          <h2>Increment / Decrement Counter</h2>
          <h4>Using React and Redux</h4>
    
          <div className="quantity">
            <button className="quantity_minus" title="Decrement" onClick={() => dispatch(decNumber())}>
              <span> - </span>
            </button>
            <input
              name="quantity"
              type="text"
              className="quantity_input"
              value={myState}
            />
            <button className="quantity_plus" title="Increament" onClick={() =>dispatch(incNumber())} >
              <span> + </span>
            </button>
            <button className="quantity_plus" title="Reset Count" onClick={() =>dispatch(resetNumber())} >
              <span> Reset </span>
            </button>
            
          </div>
        </div>
      );
    }
    
    export default App;
```
This is how application is looking like : -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51iq76kd0umaghb0xldl.jpg)

So this is how we can implement react-redux in our react application, Hopefully you find this tutorial helpful. Thank You.