React useContext + useReducer 实现 Hooks 状态管理功能

App.tsx

import { useReducer } from "react";
import { BrowserRouter, Switch } from 'react-router-dom';
import { renderRoutes } from "react-router-config";
import routes from "./router";
import { IUser, IReducerAction } from '@/common/types/interface'
import { UserContext } from '@/store/user'

function App() {
  const userReducer = (state: IUser, action: IReducerAction) => {
    switch (action.type) {
      case 'updata':
        return { ...state, ...action.params }
      default:
        return state
    }
  }
  const userStorage = sessionStorage.getItem('userInfo') || '{}'
  const initialUserState = JSON.parse(userStorage)
  const [store, dispatch] = useReducer(userReducer, initialUserState)
  return (
    
      
        
          { renderRoutes(routes) }
        
      
    
  );
}
export default App; 

创建 createContext (@/store/user)

import { createContext } from "react";
// import { ICreateContext } from '@/common/types/interface'
interface ICreateContext {
  store: any,
  dispatch: any
}
export const UserContext = createContext({
  store: '',
  dispatch: ''
});

在登录时获取接口返回的数据，并更新到  store 中

import React, {useContext} from "react";
import { LoginWrapper, LoginContainer } from './styled'
import { Form, Input, Button, message } from 'antd';
import { login } from '@/api/login'
import { UserContext } from '@/store/user'

interface ILogin {
  userName: string;
  password: string;
}

const Login: React.FC = (props:any) => {
  const { dispatch } = useContext(UserContext)
  const onFinish = async (form: ILogin) => {
    try {
      const res:any = await login(form)
      message.success(res.message);
      sessionStorage.setItem('userInfo', JSON.stringify(res.data))
      dispatch({
        type: 'updata',
        params: res.data
      })
      setTimeout(() => {
        props.history.push('/home')
      }, 1000)
    } catch (error) {
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    
      
        
登录
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          initialValues={{
            userName: 'Fengchengzhi',
            password: '123456'
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="userName"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            
          
          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            
          
          10, span: 14 }}>
            "primary" htmlType="submit">
              Submit
            
          
        
      
    
  )
}

export default Login

获取 store 数据并展示

import React, { useContext } from "react";
import { HeaderWrapper } from './styled'
import { UserContext } from '../../store/user'

const HeaderComps: React.FC = () => {
  const { store: userInfo } = useContext(UserContext)
  return (
    "header-wrapper">
      用户姓名：{ userInfo.userName }
    
  )
}

export default HeaderComps