redux - 模版代码

首先安装 npm install @reduxjs/toolkit react-redux -S 创建src/store/index.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './modules/user';
const store = configureStore({
    reducer: {
        user: userReducer
    }
});
export default store;

再创建src/store/modules/user.js

import { createSlice } from '@reduxjs/toolkit';
import { asyncGetUser } from '@/api/commonAPI';
const userSlice = createSlice({
    name: 'user',
    initialState: {
        userName: "9562"
    },
    reducers: {
        setUserName(state,actions) {
            state.userName = actions.payload;
        },
    },
});
// 外部组件来使用的action
export const { setUserName } = userSlice.actions;

// 异步设置reducer
export const asyncSetUserId = () => {
    return async (dispatch) => {
        const user = await asyncGetUser();
        dispatch(setUserName(user.name));
    }
}

// 默认导出是所有的reducer 供store注册这些方法
export default userSlice.reducer;

在main.js中引入

import ReactDOM from 'react-dom/client'
// 引入store
import { Provider } from 'react-redux';
import store from '@/store/index.tsx';
// 引入路由
import { RouterProvider } from 'react-router-dom'
import router from './router/index.tsx'

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

最后在需要调用的地方使用

import { useSelector,useDispatch } from "react-redux"
import { setUserName,asyncSetUserId }  from "@/store/modules/user"
import { useEffect, useState } from "react";
const About = () => {
  const dispatch = useDispatch()
  const { userName } = useSelector((state) => state.user);
  const[inp,setInp] = useState("")
  useEffect(() => {
    dispatch(asyncSetUserId())
  },[])
  return (
    <div>
      <h1>
        <div>{userName}</div>
      </h1>
        <input onChange={e=>setInp(e.target.value)} type="text" /><button onClick={()=>dispatch(setUserName(inp))}>setUserId</button>
    </div>
  );
};
export default About;