New Redux 😱 is just 🔥

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

$ npx create-react-app learn-redux

Add Redux and Redux Toolkit

$ 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

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

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

Provide the Redux Store to React

in the file src/index.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

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

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

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

Write App.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

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

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

const dispatch = useDispatch();

Accessing the counter value

Update the span tag accordingly.

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

Writing on Click Events

Increment Button

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

Decrement Button

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

App.js looks like this

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>
  );
}