About react-redux case

Great looks, successful career, smooth sailing, promotion, salary increase, everything goes well, sweet love, prosperous and prosperous

Preface

Hello everyone, I am Ge Yao. Today I will take you to learn about react-redux.

technology stack

react+ant design

rely

"dependencies": {
    "@ant-design/icons": "^5.2.5",
    "antd": "4.23.4",
    "less": "2.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.8",
    "react-router-dom": "^6.3.8",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.2",
    "reset-css": "^5.0.2",
    "sass": "^1.66.1",
    "vite-plugin-style-import": "^2.0.0"
  },

File Directory

router+app.tsx

router

import React, { lazy } from "react"
import { Navigate } from "react-router-dom"
const Fang = lazy(() => import("../views/fang"))
const Home = lazy(() => import("../views/home"))
const Geyao = lazy(() => import("../views/Geyao"))
import Login from "@/views/Login"
const withLoadingComponent = (comp: JSX.Element) => {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            {comp}
        </React.Suspense>
    )
}
const routes = [{
    path: "/",
    element: <Navigate to="/geyao" />
},
{
    path: "/login",
    element: <Login />
},
{
    path: "*",
    element: <Navigate to="/geyao" />
},
{
    path: "/",
    element: <Home />,
    children: [{
        path: "/geyao",
        element: withLoadingComponent(<Geyao />),
    }, {
        path: "/fang",
        element: withLoadingComponent(<Fang />),
    }]
}]
export default routes

App.tsx

import "reset-css"
import "./assets/global.scss"
import 'antd/dist/antd.css'
import {useRoutes,Link} from "react-router-dom"
import router from "./router";
function App() {
  const outlet=useRoutes(router)
  return (
    <>
     {outlet}
    </>
  )
}
export default App

The knowledge points involved include lazy loading and routing jump related knowledge

Component creation test

geyao.tsx

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import NumberStatus from "@/store/Numberstatus"
export const Geyao = () => {
  const { number } = useSelector((state:RootState) => ({
    number: state.handleNum.number
  }))
  const dispatch = useDispatch()
  const handleChange = () => {
      dispatch(NumberStatus.aysncActions.asyncAdd1)
  }
  const handleArr = () => {
    dispatch({type: "geyaopush",value:100})
  }
  const { geyao } = useSelector((state:RootState) => ({
    geyao: state.handleArray.geyao
  }))
  return (
    <div>
      fanghome
      <p>{number}</p>
      <button onClick={handleChange}>Button</button>
      <p>{geyao}</p>
      <button onClick={handleArr}>Button</button>
    </div>
  )
  }
export default Geyao

test component

fang.tsx

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import store from '@/store'




export const Fang = () => {
  const { number } = useSelector((state:RootState) => ({
    number: state.number
  }))
  const dispatch = useDispatch()
  const handleChange = () => {
    dispatch( {type: "add1"})
  }
  return (
    <div>
      fanghome
      <p>{number}</p>
      <button onClick={handleChange}>Button</button>
    </div>
  )
}




export default Fang

main reducer file

index.ts

import { legacy_createStore,combineReducers,
compose,applyMiddleware} from "redux";
import reduxThunk from "redux-thunk"
import handleNum from "./Numberstatus/reduce.ts";
import handleArray from "./Arraystatus/reduce.ts";
const reducers=combineReducers({
    handleNum,
    handleArray
})
// const store= legacy_createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ & amp; & amp;window.__REDUX_DEVTOOLS_EXTENSION__())
let composeEnhances=window.__REDUX_DEVTOOLS_EXTENSION__COMPOSE
?window.__REDUX_DEVTOOLS_EXTENSION__COMPOSE({})
:compose
const store=legacy_createStore(reducers,composeEnhances
(applyMiddleware(reduxThunk)))
export default store

Ordinary number

index.ts

const store = {
    state: {
        number: 20
    },
    actions: {
        add1(newState: { number: number }, action: { type: string }) {
            setTimeout(()=>{
                newState.number + +
            },1000)
        },
        add2(newState: { number: number }, action: { type: string, value: number }) {
            newState.number + = action.value
        }




    },
    aysncActions:{
        asyncAdd1(dis:Function){
            setTimeout(()=>{
                dis({type:"add1"})
            },1000)
        }
    },
    // add1:"add1",
    // add2:"add2"
    actionNames: {
     
    }
   
}
let actionNames={
        
}
for(let key in store.actions){
    actionNames[key]=key
}
store.actionNames=actionNames
export default store

reduce.ts

import HandNumber from "./index"








let reducer=(state={
    ...HandNumber.state,
  
},action:{type:string,value:number})=>{
    console.log("dispatch execution")




    let newState=JSON.parse(JSON.stringify(state))
    console.log(newState,"newState")
    console.log(action,"action")
    // switch(action.type){
    // case HandNumber.add1:
    // HandNumber.actions[HandNumber.add1](newState,action)
    // break;
    // case HandNumber.add2:
    // HandNumber.actions[HandNumber.add2](newState,action)
    // break
    //default:
    // break;
    // }
    for(let key in HandNumber.actionNames){
        if(action.type===HandNumber.actionNames[key]){
            HandNumber.actions[HandNumber.actionNames[key]](newState,action)
            break
        }
    }




    return newState
}
export default reducer

array number

index.ts

const store= {
    state:{
        geyao:[10,20,30]
    },
    actions:{
        geyaopush(newState:{geyao:number[]},action:{type:string,value:number}){
            newState.geyao.push(action.value)
        }
    },
    actionNames:{}
}
let actionNames={
}
for(let key in store.actions){
    actionNames[key]=key
}
store.actionNames=actionNames
export default store

reduce.ts

import HandleArr from "./index"
let reducer=(state={
    ...HandleArr.state,
},action:{type:string,value:number})=>{
    console.log("dispatch execution")
    let newState=JSON.parse(JSON.stringify(state))
    console.log(newState,"newState")
    console.log(action,"action")
    for(let key in HandleArr.actionNames){
        if(action.type===HandleArr.actionNames[key]){
            HandleArr.actions[HandleArr.actionNames[key]](newState,action)
            break
        }
    }




    return newState
}
export default reducer

operation result

Remark

redux-thunk solves asynchronous problems and final dependency installation

github address

https://github.com/geyaoisnice/React-manage-demo

View historical article below

Summary of react-admin + material ui5.0 project

Use of rc-tree

Webpack Principles Practical Notes