@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} from '@reduxjs/toolkit'
// 第二步 创建切片的实例对象 包含切片的名称 数据 行为
const counterSlice = createSlice({name:'counter',initialState:{count:10,message:'hello word'},reducers:{// 修改数据的方法changeMessageAction(state,{payload}){state.message = payload}}
})
export const {changeMessageAction} = 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'
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'))}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>
}
