Redux a popular React and React Native state management library.
Here is all component of redux in one page
npx create-react-app reactapp
cd reactapp
yarn add react-redux
Add this in index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";
import allReducer from "./reducers";
//ACTION -> INCREMENT (describes what you want to do!) it's a simple function
const increment = () => {
return {
type: "INCREMENT",
};
};
const decrement = () => {
return {
type: "DECREMENT",
};
};
//REDUCER -> (action transfer from one state to another state, it gonna modify our store)
//You can have many reducers (Auth reducer, Movielist reducer etc ...)
const counter = (state = 0, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
}
};
//STORE -> Globalized STATE
let store = createStore(counter);
//Display it in the console.
store.subscribe(() => console.log(store.getState()));
//DISPATCH (DISPATTCH this action to the reducer)
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(increment());
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
Testing it: check the console in inspect to see how it increments and decrements.
Github Repo For more advanced way of doing it:
https://github.com/Byusa/learn-redux
This repo shows the use of redux it could be one a proper way with the store and multiple reducers their own folders.
Reference:
https://www.youtube.com/watch?v=CVpUuw9XSjY
Top comments (2)
dev.to/mohitm15/starting-with-reac...
This article don't have any useful information for anyone. There is nothing that can be applied to real life, it's just some usage of redux api. There is no any information about correct integrating redux with react, no best practices. There is nothing useful. Why this article was created? Better to take 1 min look at redux docs an you will get a lot more.
Some comments have been hidden by the post's author - find out more