react18结合路由reuter@6——TS和redux的配合

Posted 2022-12-11 勇敢*牛牛

利用react-router@6+TS完成路由的跳转与参数的接收

---

主要是对params参数做类型的限制。

---

import  useNavigate,useParams,useSearchParams,useLocation  from "react-router-dom"

const Detail = () => 
    const navigate = useNavigate()
    const params = useParams<uid:string>()//接收params参数
    const [search] = useSearchParams();
    const location = useLocation()

    return (
        <div>
            <h1>details</h1>
            <button onClick=()=>navigate('/about')>去关于页面</button>
            <hr />
            <div>
                动态路由参数：params.uid
                <hr></hr>
                搜索search参数:search.get("title")
                <hr></hr>
                state数据:location.state?.phone
            </div>
            
        </div>

    )


export default Detail

---

redux的配合

使用

yarn add @reduxjs/toolkit

导出类型

export interface Iadd
    num:number

接收类型

import type Iadd from "./typeings"

推荐对state类型的限制写法

import createSlice, PayloadAction from "@reduxjs/toolkit"
import type Iadd from "./typeings"
const countSlice = createSlice(
    name:"addcount",
    initialState:
        num:1000
     as Iadd,
    reducers:
        steNum(state,action:PayloadAction<number>)
            state.num += action.payload
        
    

)
export const steNum = countSlice.actions
export default countSlice.reducer

---

使用之前先对usedispatch和useSelector进行重构。

• 首先对于store仓库源来获取所有的数据的类型，导出

import  configureStore from "@reduxjs/toolkit";
import addcount from "../components/Home/addcount";

const store =  configureStore(
    reducer:
        addcount
    
)

export type APPdispatchtype = typeof store.dispatch;
export type Rootstatetype = ReturnType<typeof store.getState>

export default store

• 重构hooks函数的获取与派发；

import useSelector,useDispatch from "react-redux";
import type TypedUseSelectorHook from "react-redux" 

import Rootstatetype,APPdispatchtype from './index'

export const useAppDispatch = ()=>useDispatch<APPdispatchtype>();
export const useAppselector:TypedUseSelectorHook<Rootstatetype> = useSelector

• 同步使用

import React from 'react'
import useAppselector,useAppDispatch from '@/store/hooks'
import steNum from './addcount'
const Home = ()=> 
    const addcount = useAppselector(state=>state.addcount.num);
    const dispatch = useAppDispatch();
  return (
    <>
        <h1>home-addcount</h1>
        <hr />
        <button onClick=e=>dispatch(steNum(2))>++++</button>
    
    </>
  )


export default Home

• 异步存储