Redux

1pnpm i @reduxjs/toolkit react-redux

1// .../store/userReducer.ts
2import { createSlice, PayloadAction } from '@reduxjs/toolkit'
3
4export interface IStoreUserType {
5  username: string
6}
7const INIT_STATE: IStoreUserType = { username: '' }
8
9const userSlice = createSlice({
10  name: 'user',
11  initialState: INIT_STATE,
12  reducers: {
13    resetUser: (state: IStoreUserType, action: PayloadAction<IStoreUserType>) => {
14      console.log('🚀 ~ state:', state)
15      return action.payload
16    },
17  },
18})
19export const { resetUser } = userSlice.actions
20export default userSlice.reducer
21

1// .../store/index.ts
2import { configureStore } from '@reduxjs/toolkit'
3import userReducer, { IStoreUserType } from './userReducer'
4
5export interface IStoreType {
6  user: IStoreUserType
7}
8
9export const store = configureStore({
10  reducer: {
11    user: userReducer,
12  },
13})
14
15export type RootState = ReturnType<typeof store.getState>
16export type AppDispatch = typeof store.dispatch
17

1// .../store/StoreProvider.tsx
2import React from 'react'
3import { Provider } from 'react-redux'
4import { store } from '.'
5
6const StoreProvider = ({ children }: { children: React.ReactNode }) => {
7  return <Provider store={store}>{children}</Provider>
8}
9export default StoreProvider
10

1...
2ReactDOM.createRoot(document.getElementById('root')!).render(
3  <ApolloProvider client={client}>
4    <StoreProvider>
5      <RouterProvider router={router}></RouterProvider>
6    </StoreProvider>
7  </ApolloProvider>
8)
9