关于react-redux案例

2023-10-18 11:09:41 浏览数 (2)

颜值爆表事业有成一帆风顺升职加薪万事如意爱情甜蜜蒸蒸日上步步高升

前言

大家好 我是歌谣 今天带大家来学习react-redux的知识

技术栈

react ant design

依赖

代码语言：javascript复制
"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"
  },

文件目录

router app.tsx

router

代码语言：javascript复制
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

代码语言：javascript复制
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

涉及的知识点包含懒加载 和 路由跳转相关知识

组件创建测试

geyao.tsx

代码语言：javascript复制
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>
      <p>{geyao}</p>
      <button onClick={handleArr}>按钮</button>
    </div>
  )
  }
export default Geyao

测试组件

fang.tsx

代码语言：javascript复制
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>
    </div>
  )
}


export default Fang

主reducer文件

index.ts

代码语言：javascript复制
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__&&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

普通number

index.ts

代码语言：javascript复制
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

代码语言：javascript复制
import HandNumber from "./index"




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


    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

数组number

index.ts

代码语言：javascript复制
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

代码语言：javascript复制
import HandleArr from "./index"
let reducer=(state={
    ...HandleArr.state,
},action:{type:string,value:number})=>{
    console.log("dispatch执行")
    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

运行结果

备注

redux-thunk 解决异步问题 最终依赖安装

github地址

代码语言：javascript复制
https://github.com/geyaoisnice/React-manage-demo
react redux action import 测试

0 人点赞