React + Redux Setup with Redux-toolkit ⚛
Tags: react, redux, javascript, tutorial
Published: 2020-08-22 14:57:18

## What every other post about Redux on the internet says: 😶

> "Don't use Redux, it has too much boilerplate". 

>"Oh, man! I have to do so many npm installs"  

>"You have to write so much code, just to configure it!"

### Never heard of Redux or super new to it? *I gotch you*

 This is one of the best explanations of Redux. [Here ya go!](https://www.freecodecamp.org/news/an-intro-to-redux-and-how-state-is-updated-in-a-redux-application-839c8334d1b1/#:~:text=The%20only%20way%20to%20update%20a%20state%20inside%20a%20store,what%20Redux%20is%20all%20about.) 
## Why use Redux Toolkit? 🤷‍♂️
Redux toolkit includes all the functions or "tools", you want for a Redux application. At the end of the day,  less code and faster setups of Redux in every scenario.

Here's what the  [Official docs](https://redux-toolkit.js.org/) said :

>  **These tools should be beneficial to all Redux users**. Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

## Setup create-react-app with Redux 🔨

Create-react-app gives you a basic React app so don't have to setup React yourself. Install it globally, if haven't already.

Do this on your terminal : 

```
npx install -g create-react-app
``` 
Then to create your React app and cd into the root directory of your React app

```
create-react-app react-redux
cd react-redux
``` 
Then we will install redux
```
npm install --save react-redux @reduxjs/toolkit
```
We will be following this **folder structure**


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9twi2r7pceids2oidro.png)
Now we have to configure our **Store**, now this is where you'll the magic redux toolkit! Now create a folder called `store` and under that a file called  `reducerConfig.js` containing 

```
import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
const reducer = combineReducers({
    // we will return here, you have to include all your Reducers here!
});
const store = configureStore({
    reducer,
});
export default store;

``` 
 
Here  [`configureStore({})`](https://redux-toolkit.js.org/api/configureStore) wraps `createStore()` to simplify the configuration for us. You can add whatever Redux middleware you want to supply and it already includes `redux-thunk` and has already enabled [Redux DevTools Extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) (**install this!**).
People who have used Redux before could already see how much work is handled by Redux Toolkit.

Now we need to connect our store to our app or just wrap it with 
Redux. Import `reduxConfig.js` and `Provider` from react-redux into `src/index.js`

```
....
....
import store from "./store/reducerConfig";
import { Provider } from "react-redux";

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);
```
Now start your application with `npm start` and open up Redux DevTools, you should see `@@INIT`. Congrats you have setup Redux with React!! 🥳️

##  How to use Redux in your project? 🤔

Just to understand the workflow we will build a *simple* counter app.
Make a folder under our store called "actions" and then make a file called `counterActions.js`,
`store/actions/counterActions.js` : 
```
// This is a Action Type, you can move this to  another file and export it 
// from there -- its called "best practice" :)
export const ADD = "ADD";  
// This is the "Action" it self which indicates which reducer which will be called
export const inc = () => {
    return {
        type: ADD,
    };
};
``` 
Now we are going to create *Reducers*. This is where we will initialize our state and make changes to it.
**If the concept of actions and reducers are not making sense right now, it will in a second.** Now we create a folder called "reducers" and then create a file inside it called "counter.js".

`src/store/reducers/counter.js`

```
import { ADD } from "../Actions/counterActions";

const initState = { // this is your initial state.
    counter: 0, // variable inside your state, too keep track of the count.
};
// assigning initial state and receiving actions as arguments.
const reducer = (state = initState, actions) => { 
    switch (actions.type) {
        case ADD:
            return {
                ...state, // here you copy the state and make changes to it.
                counter: state.counter + 1,
            };
        default:
            return state;  // Have to return state as a default
    }
};
export default reducer;
```
Here a specific part of the state is updated according to the action dispatched by our frontend.
Here is what Freecodecamp had to say: 
> The only way to update a state inside a store is to dispatch an action and define a reducer function to perform tasks based on the given actions. Once dispatched, the action goes inside the reducer functions which performs the tasks and return the updated state to the store. This is what Redux is all about.

Now in our `reduxConfig.js` file add our reducer that we just created
```
.
.
import counter from "./reducers/counter";
const reducer = combineReducers({
    counter, // put all your reducers here!  
});
.
.
```

## Handling Redux in our React code ⚛

In your `src/App.js` file paste the following React code :

```
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { add } from "./store/Actions/counterActions";
function App() {
    const dispatch = useDispatch();
    const { counter } = useSelector((state) => state.counter);
    return (
        <div style={{ textAlign: "center" }}>
            <div>
                <p style={{ margin: "1rem" }}>{counter}</p>
                <button onClick={() => dispatch(add())}> Add +1 </button>
            </div>
        </div>
    );
}
export default App;
``` 
Here `useDispatch()` is provided by `"react-redux"` and used to dispatch our actions.
```
 const dispatch = useDispatch();
```
Remember the name of our reducer we imported in `reducerConfig.js`, that's the name we have to use when using the `useSelector()` hook. It receives our state in arguments and then we can extract every other variable in our state with the help of destructuring :
```
const { counter } = useSelector((state) => state.counter);
```
Now in your Terminal, to start your React app: 
```
npm start
```
  
Now your app should look like this : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5stunwoiyqp291hue3x.gif)
# Congrats you made it! 🥳️

You have setup react and Redux! **There are obviously many complex use cases of Redux which I will cover in the upcoming blogs**.

#### Inspiring lyrics from Hip-hop (You'll find these in every one of my blogs) 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ox80d25m643y4uomns3n.png)

*-Logic, Under Pressure*