Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 28, 2021 02:49 am GMT

Applicable React Redux example step by step from scratch

A simple example of React Redux

Step 0: Create a react app and install redux

npx create-react-app reactappcd reactappyarn add react-redux

Step 1: Create actions

ACTIONS -> INCREMENT (describes what you want to do!) it's a simple function
In src create a folder name it actions and add file named index.js

src/actions/index.js
export const increment = (number) => {    return {        type: "INCREMENT",        payload: number,    };};export const decrement = () => {    return {        type: "DECREMENT",    };};

Step 2: Create reducers

REDUCERS -> here an action transfer from one state to another state, it gonna modify our store.
You can have many reducers (Authentication reducer, Movielist reducer etc ...)

Create a folder called reducers
inside reducers create counter.js file

src/reducers/counter.js
const counterReducer = (state = 0, action) => {    switch (action.type) {        case "INCREMENT":            return state + action.payload;        case "DECREMENT":            return state - 1;        default:            return state;    }};export default counterReducer;

inside reducers create a second reducer named isLogged.js file.

src/reducers/isLogged.js
const loggedReducer = (state = false, action) => {    switch (action.type) {        case "SIGN_IN":            return !state;        default:            return state;    }};export default loggedReducer;

inside reducers create a index file to export them.

src/reducers/index.js
import counterReducer from "./counter";import loggedReducer from "./isLogged";import { combineReducers } from "redux";const allReducers = combineReducers({    //you can name it anything    //counterReducer (this means counterReducer:counterReducer )    counter: counterReducer,    isLogged: loggedReducer,});export default allReducers;

Step 3: Create your Store

Store -> You can add your store in app.js.
You can only have one store

src/app.js
import React from "react";import { useSelector, useDispatch } from "react-redux";import { increment, decrement } from "./actions";function App() {    const counter = useSelector((state) => state.counter);    const isLogged = useSelector((state) => state.isLogged);    const dispatch = useDispatch();    return (        <div className="App">            <h1>Counter {counter} </h1>            <button onClick={() => dispatch(increment(5))}>+</button>            <button onClick={() => dispatch(decrement())}> -</button>            {isLogged ? <h3>Valuable Information I shouldn't see</h3> : ""}        </div>    );}export default App;

Testing it
Option 1: check the console in inspect to see how it increments and decrements.
Option.
Option 2: Install Redux Devtool chrome extension.
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

Github repo:
https://github.com/Byusa/learn-redux

Reference:
https://react-redux.js.org/
https://redux.js.org/tutorials/fundamentals/part-5-ui-react
https://www.youtube.com/watch?v=CVpUuw9XSjY


Original Link: https://dev.to/byusa/applicable-react-redux-example-step-by-step-from-scratch-2i59

Share this article:    Share on Facebook
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