An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To