Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

January 5, 2022 04:11 am GMT

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.jsredux      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 functionexport 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>  );}

Run the development Server

$ yarn start

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

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.

Happy Coding!

Original Link: https://dev.to/rajeshj3/new-redux-is-just-3mle

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To