Redux的使用方法，目前借助的是reduxjs/toolkit redux工具

@1 第一步 安装redux的插件：  npm i @reduxjs/toolkit react-redux

@2 第二步 创建store文件夹下创建index.ts文件

import {configureStore} from '@reduxjs/toolkit'  

const store = configureStore({ // 创建store实例对象
  reducer:{}
})

export default store // 对外暴露导出

@3 第三步 index.ts入口文件中导入store，用Provider标签进行包裹App跟组件把数据传递@

import React from 'react'
import ReactDOM from 'react-dom/client'
import {HashRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import store from '@/store' // 导入store
import App from '@/App'
import '@/assets/css/index.less'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  // provider  用來传递store的数据
  // HashRouter 表示hash模式
  <Provider store={store}>
  <HashRouter>
    <App></App>
  </HashRouter>
  </Provider>
)

@4 redux的模块化开发，在store文件下创建modules的文件夹下创建测试的counter.ts的文件

// 第一步 导入切片
import {createSlice,createAsyncThunk} from '@reduxjs/toolkit'
import {getsongs} from '@/service/index'
// 第三步 创建异步调用接口修改数据的方法
export const fetchRecommendDataAction = createAsyncThunk('fetchdata',async(state,{dispatch})=>{
 const res =  await getsongs() as any
 dispatch(changeBanner(res.banners))
 // ... 这里可以同时调用多个请求 改变数据 在组件中只需要派发一次便可
})

// 第二步 创建切片的实例对象 包含切片的名称 数据 行为
const counterSlice = createSlice({
  name:'counter',
  initialState:{
    count:10,
    message:'hello word',
    banner:[]
  },
  reducers:{
    changeMessageAction(state,{payload}){
      state.message = payload
    },
    changeBanner(state,{payload}){
      state.banner = payload
    }
  }
})
export const {changeMessageAction,changeBanner} = counterSlice.actions // 向外导入修改数据的方法
export default counterSlice.reducer // 向外导出数据

@5 将counter.ts文件导入到store的index.ts文件中合并使用：

import {configureStore} from '@reduxjs/toolkit' 
import counterReducer from './module/counter'
import {useSelector,TypedUseSelectorHook,useDispatch} from 'react-redux'
const store = configureStore({
  reducer:{
      counter:counterReducer
  }
})
export default store

 @6 在App跟组件中使用store的数据，此刻会面临到state类型校验的错误 

// 在组件内部 使用useSelector 和useDispatch 获取store的数据和调用修改数据的方法
import {useSelector,shallowEqual,useDispatch} from 'react-redux'
import {changeMessageAction,fetchRecommendDataAction} from '@/store/module/counter'
const App = ()=>{

    
  const {count,message} = useSelector((state)=>state.counter,shallowEqual) // shallowEqual 阻止多次加载
  console.log(count,message)

  // 派发store里面的方法
  const disPatch = useDispatch()
  const handlerChangeMessage = ()=>{
    disPatch(changeMessageAction('hello React'))
  }
   useEffect(()=>{dispatch(fetchRecommendDataAction()},[])
    return (

        <div>

            {count}-{message}

        </div>

    )
}

@7 解决state类型错误的问题重写useSelectore 和 useDispatch ；

import {configureStore} from '@reduxjs/toolkit' 
import counterReducer from './module/counter' // 导入子模块的store数据
import {useSelector,TypedUseSelectorHook,useDispatch} from 'react-redux'
const store = configureStore({
  reducer:{
      counter:counterReducer
  }
})

// 解决useSelector的类型
type GetStateFnType = typeof store.getState
export type IRootState = ReturnType<GetStateFnType>
export const useAppSelector:TypedUseSelectorHook<IRootState> = useSelector
// 解决useSelector的类型

// 解决useDispatch的类型
type DispatchType = typeof store.dispatch
export const useAppDispatch:()=> DispatchType = useDispatch
// 解决useDispatch的类型

export default store

@8 在组件中使用 修改后的useAppDispatch 和useAppSelector 解决state类型的问题

import React,{Suspense,useState} from 'react'
import {useRoutes,Link} from 'react-router-dom' // 创建一级路由出口
import {useSelector,shallowEqual,useDispatch} from 'react-redux'
import routes from './router' // 导入的路由规则
import {useAppSelector,useAppDispatch} from '@/store/index' // state的类型规范
import {changeMessageAction} from '@/store/module/counter'
function App() {

  // 这里面临问题 定义 state的类型
  const {count,message} = useAppSelector((state)=>state.counter,shallowEqual) // shallowEqual 阻止多次加载
  console.log(count,message)

  // 派发store里面的方法
  const disPatch = useAppDispatch()
  const handlerChangeMessage = ()=>{
    disPatch(changeMessageAction('hello React'))
  }
  return <div></div>
}