New Redux 😱 is just 🔥
Tags: javascript, react, webdev, redux
Published: 2022-01-05 04:11:11

React Redux is the official React binding for Redux. It allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data.

Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes to the Redux store, checks to see if the data which your component wants have changed, and re-renders your component.

---

## Let's Code a simple Counter App 🚀

> Create new React App

```bash
$ npx create-react-app learn-redux
```

> Add Redux and Redux Toolkit

```bash
$ yarn add @reduxjs/toolkit react-redux
```

**Redux Toolkit** is **official, opinionated, batteries-included toolset for efficient Redux development**. It includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away.

> Directory Structure

```
src
│   App.js
│   index.js
│
└───redux
│   │   store.js
│   │
│   └───counter
│       │   counterSlice.js
```

> Create a Redux Store

in the file `src/redux/store.js`

```js
import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});
```

> Provide the Redux Store to React

in the file `src/index.js`

```js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";
import { Provider } from "react-redux";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```

> Create a Redux State Slice for Counter

in the file `src/store/counter/counterSlice.js`

```js
import { createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    setCounter: (state, action) => {
      state.value = action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { setCounter } = counterSlice.actions;

export default counterSlice.reducer;
```

> Add Slice Reducers to the Store

in the file `src/redux/store.js`

```js
import { configureStore } from "@reduxjs/toolkit";
import counter from "./counter/counterSlice";

export default configureStore({
  reducer: {
    counter,
  },
});
```

> Write `App.js`

```js
export default function App() {
  return (
    <div>
      <button aria-label="Increment value">Increment</button>
      <span>#</span>
      <button aria-label="Decrement value">Decrement</button>
    </div>
  );
}
```

> Import requirements

```js
import { useSelector, useDispatch } from "react-redux";
import { setCounter } from "./redux/counter/counterSlice";
```

- **useSelector** will be used to fetch data from the global store

- **useDispatch** will be used to update the data in the global store

> Create `Counter` variable and insialize the dispatch

```js
const counter = useSelector((state) => state.counter);

const dispatch = useDispatch();
```

> Accessing the counter value

Update the span tag accordingly.

```html
<span>#{counter.value}</span>
```

> Writing on Click Events

- Increment Button

```html
<button
  aria-label="Increment value"
  onClick={() => dispatch(setCounter(counter.value + 1))}
>
  Increment
</button>
```

- Decrement Button

```html
<button
  aria-label="Decrement value"
  onClick={() => dispatch(setCounter(counter.value - 1))}
>
  Decrement
</button>
```

> App.js looks like this

```js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setCounter } from "./redux/counter/counterSlice";

export default function App() {
  const counter = useSelector((state) => state.counter);

  const dispatch = useDispatch();

  return (
    <div>
      <button
        aria-label="Increment value"
        onClick={() => dispatch(setCounter(counter.value + 1))}
      >
        Increment
      </button>
      <span>{counter.value}</span>
      <button
        aria-label="Decrement value"
        onClick={() => dispatch(setCounter(counter.value - 1))}
      >
        Decrement
      </button>
    </div>
  );
}
```

---

## Run the development Server 🚀

```bash
$ yarn start
```


![React Redux Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb3894fhfbzq0insg5u2.png)

And, if you hit and of the counter buttons, you'll see the updated values of the counter in the UI.


![React Redux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d8pmsbx8va012xenhdf.png)

---

Hurray! You just learned `What's new is React Redux.`

---

I hope, you guys liked this quick tutorial. If so, then please don't forget to drop a Like ❤️

And also, help me reach **1k Subscribers** 🤩, on my [YouTube channel](https://www.youtube.com/channel/UCCO4jIqmQVFDmVeeaAO5obA).

Happy Coding! 😃💻