Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mfarhadattari/redux-intro
https://github.com/mfarhadattari/redux-intro
Last synced: 30 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/mfarhadattari/redux-intro
- Owner: mfarhadattari
- Created: 2023-08-27T03:46:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-30T13:59:36.000Z (over 1 year ago)
- Last Synced: 2023-08-30T22:56:05.521Z (over 1 year ago)
- Language: JavaScript
- Size: 3.95 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux Intro
Redux is an open-source JavaScript library for managing and centralizing application state.
## REDUX CORE CONCEPTS:
## BASIC REDUX APP
1. CREATE STORE
```javaScript
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer: {},
});
export default store;
```
2. CONNECT STORE WITH APP
```javaScript
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App.jsx";
import "./index.css";
import store from "./redux/store.js";
ReactDOM.createRoot(document.getElementById("root")).render(
);
```
3. CREATE SLICE
```javaScript
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
count: 0,
};
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: { },
});
export default counterSlice.reducer;
```
4. CONNECT SLICE WITH STORE
```javascript
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice";
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
```
5. WRITE BUSINESS LOGIC IN REDUCER
```javascript
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
count: 0,
};
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
increment: (state) => {
state.count = state.count + 1;
},
decrement: (state) => {
state.count = state.count - 1;
},
incrementByValue: (state, actions) => {
state.count = state.count + actions.payload;
},
},
});
export const { increment, decrement, incrementByValue } = counterSlice.actions;
export default counterSlice.reducer;
```
6. CONSUME STATE
```javascript
import { useSelector } from "react-redux";
const ReduxCounter = () => {
const { count } = useSelector((state) => state.counter);
return (
Redux Counter
Decrease
{count}
Increase
Increase 5
);
};
export default ReduxCounter;
```
7. ACTION DISPATCH
```javascript
import { useDispatch, useSelector } from "react-redux";
import {
decrement,
increment,
incrementByValue,
} from "../redux/features/counter/counterSlice";
const ReduxCounter = () => {
const { count } = useSelector((state) => state.counter);
const dispatch = useDispatch();
return (
Redux Counter
dispatch(decrement())}>
Decrease
{count}
dispatch(increment())}>
Increase
dispatch(incrementByValue(5))}
>
Increase 5
);
};
export default ReduxCounter;
```
## Middleware
### Create Middleware
```javascript
const customLogger = (store) => (next) => (action) => {
const previousState = store.getState();
console.log("previousState :", previousState);
console.log("actions :", action);
next(action);
const newState = store.getState();
console.log("newState :", newState);
};
export default customLogger;
```
### Use Middleware
```javaScript
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counter/counterSlice";
import customLogger from "./middlewares/customLogger";
const store = configureStore({
reducer: {
counter: counterReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(customLogger),
});
export default store;
```