react redux

index.js

/**
 * 项目入口 从这里开始运行
 */
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

import {RouterProvider} from 'react-router-dom' 
import router from './router';
import store from './store'
import { Provider} from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // 状态
  <Provider store={store}>
    {/* 组件 */}
    <ConfigProvider locale={zhCN}>
        {/* 路由 */}
      <RouterProvider router={router}></RouterProvider>
    </ConfigProvider>
  </Provider>
);

创建 store 文件夹，里面创建index.js

import { configureStore } from "@reduxjs/toolkit";
import conter from './modules/counterStore'

/**
 * 创建store
 */
const store = configureStore({
    reducer:{
        conter
    }
}) 

export default store;

创建store/module/counterStore.js 文件

import { createSlice } from "@reduxjs/toolkit";

const conter = createSlice({
    // 命名空间，name值会作为action type 的前缀
    name:"conter",
    // 初始化状态
    initialState:{
        count:0,
    },
    // 1定义 reducer 更新状态函数 2组件中dispatch使用的action 函数
    reducers:{
        add(state,action){
            console.log(state,action);
            state.count++
        },
        sub(state){
            state.count--
        }
    }
})
// 导出action 函数
export const { add , sub } = conter.actions

// 创建异步action
export  const subAsync = (payload)=>{
    return async (dispatch,getState)=>{
        setTimeout(()=>{
            dispatch(sub())
        },2000)
    }
}


// 导出reducer 创建 store
export default conter.reducer

页面使用

import { Button } from 'antd';
import { useSelector ,useDispatch } from 'react-redux'
import { add ,subAsync } from "../../store/modules/counterStore"

function Home(){
  const dispatch = useDispatch()
  const {count} = useSelector(state => state.conter)
    return (
        <div className="home">
            <div>{count}</div>
            <Button onClick={()=>dispatch(add())}></Button>
            <Button onClick={()=>dispatch(subAsync())}></Button>
        </div>
    );
}