react-redux

npm i react-redux
npm i @reduxjs/toolkit

App.tsx

import { Provider } from 'react-redux';
import store from './store';
import Deom from './components/Deom';

function App(props:any) {
    return (
        <Provider store={store}>
            <Deom />
        </Provider>
    );
}

export default App;

store/index.ts

import { configureStore } from '@reduxjs/toolkit';
import userReducer, { UserState } from './slices/userSlice';
import dataSlice, { DataState } from './slices/dataSlice';

export type Store = { 
    user: UserState
    data: DataState
}

const store = configureStore({
    reducer: {
        user: userReducer,
        data:dataSlice,
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware()
});

export type RootState = ReturnType<typeof store.getState>;
export default store;

store/slices/userSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type UserState = {
    token:string|null,
}

let tokenStorage = localStorage.getItem("token");
const initialState: UserState = {
    token: tokenStorage || '123456',
};

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setToken(state, action: PayloadAction<{ token: string }>) {
            state.token = action.payload.token;
            localStorage.setItem("token",action.payload.token)
        },
    },
});

export const { setToken } = userSlice.actions;

export default userSlice.reducer;

store/slices/dataSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';


export type DataState = {
    name:string|null,
}

let name = localStorage.getItem("name");
const initialState: DataState = {
    name:name || '我是name',
};

const userSlice = createSlice({
    name: 'data',
    initialState,
    reducers: {
        setName(state, action: PayloadAction<{ name: string }>) {
            state.name = action.payload.name;
            localStorage.setItem("name",action.payload.name)
        },
    },
});

export const { setName } = userSlice.actions;

export default userSlice.reducer;

Deom.tsx

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setToken } from "../store/slices/userSlice";
import { setName } from "../store/slices/dataSlice";
import { Store } from "../store";

const Deom: React.FC = () => {
    const dispatch = useDispatch();
    const toekn = useSelector((state:Store) => state.user.token);
    const Name = useSelector((state:Store) => state.data.name);
    /*
        token = store.getState().data.token
        Name = store.getState().data.name
        还可以通过这种方式取值 不过这种方式取到的值不会响应式更新，一般在请求头中插入token时
        会使用这种方式
    */

    function updateToken() {
        dispatch(setToken({ token:`${new Date().getTime()}` }))
    }

    function updateName() {
        dispatch(setName({ name:`姓名-${new Date().getTime()}` }))
    }

    return  <div className="App">
        <div>
            <button onClick={()=>{ updateToken() }} >修改token</button>
            { toekn }
        </div>
        <div>
            <button onClick={()=>{ updateName() }} >修改Name</button>
            { Name }
        </div>
    </div>
}

export default Deom;