This content originally appeared on DEV Community and was authored by Serge Jabo Byusa
A simple example of React Redux
Step 0: Create a react app and install redux
npx create-react-app reactapp
cd reactapp
yarn 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
This content originally appeared on DEV Community and was authored by Serge Jabo Byusa
Serge Jabo Byusa | Sciencx (2021-11-28T02:49:05+00:00) Applicable React Redux example step by step from scratch. Retrieved from https://www.scien.cx/2021/11/28/applicable-react-redux-example-step-by-step-from-scratch/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.