react18项目中redux、react-redux基础用法

本章讲解redux，react-redux在react18项目中的基本使用，下一章节将阐述对redux的进一步封装，类似于VueX。

1. 搭建基础的react18 + ts + vite + less的项目框架，详情见链接：https://mp.csdn.net/mp_blog/creation/editor/129934771

2. 安装插件

npm i redux  react-redux

3. 新建 store 文件夹，文件夹下新建CountStatus和ArrStatus文件，分别在其文件夹下创建index.ts 和 reducer.ts

4. 先处理CountStatus文件

//CountStatus/index.ts

export default {
    state: {
        count: 12
    },
    actions: {
        add1(newState: {count:number}){
            newState.count++
        },
        add2(newState: {count:number},action: {type:string,val:number}){
            newState.count += action.val
        }
    },
    actionsName: {
        add1: 'add1',
        add2: 'add2'
    }
}

// CountStatus/reducer.ts 文件

import handleCount from './index';

let reducer = ( state= {...handleCount.state}, action: { type: string,val: number } ) => {
    let newState = JSON.parse(JSON.stringify(state))

    switch(action.type) {
        case handleCount.add1:
            handleCount.actions[handleCount.add1](newState,action)
            break;
        case handleCount.add2:
            handleCount.actions[handleCount.add2](newState,action)
            break;
        default: 
            break;
    }
    return newState
}

export default reducer

5. 处理ArrStatus文件，与CountStatus类似

//  ArrStatus/index.ts

export default {
    state: {
        arr: [1,3,5,7,9]
    },
    actions: {
        arrPush(newState: {arr:number[]},action: {type:string,val:number}){
            newState.arr.push(action.val)
        }
    },
    arrpush: 'arrpush',
}

// ArrStatus/reducers.ts

import handleArr from './index';

let store = (state= {...handleArr.state}, action:{type:string,val: number}) => {
    let newState = JSON.parse(JSON.stringify(state))

    switch (action.type) {
        case "arrpush":
            handleArr.actions.arrPush(newState,action)
            break;
        default: 
            break;
    }

    return newState
}
export default store

6. 处理store文件下的index.ts

// store/index.ts

import { combineReducers, legacy_createStore } from 'redux';
import handleCount from './CountStatus/reducer';
import handeleArr from './ArrStatus/reducer';

//组合各个模块的reducer
const reducers = combineReducers({
    handleCount,
    handeleArr
})

const store = legacy_createStore(reducers)

export default store

7. 在main.ts中配置store

//引入状态管理库
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </Provider>
)

5. 页面中使用redux中的共享数据，新建一个Test.tsx文件

// Test.tsx 文件
import { useDispatch, useSelector } from "react-redux"

funtion Test () {
    //获取仓库数据
    const { count, arr } = useSelector((state:RootState) => ({
        count: state.handleCount.count,
        arr: state.handleArr.arr
    }))
    //修改仓库数据
    const dispatch = useDispatch()
    const changeCount = () => {
        // dispatch( { type: 'add2',val: 3 })
        dispatch( { type: 'add1' })
    }
    const changeArr = () => {
        dispatch({ type: 'arrpush',val: 11})
    }

    return (
        <>
            <P>计数：{ count }</P>
            <button onClick={changeCount}>点击</button>
            <P>数组：{ arr }</P>
            <button onClick={changeArr}>点击</button>
        </>
    )
}

export default Test