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

本文主要是介绍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 (
    <UserContext.Provider value={{store, dispatch}}>
      <BrowserRouter>
        <Switch>
          { renderRoutes(routes) }
        </Switch>
      </BrowserRouter>
    </UserContext.Provider>
  );
}
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<ICreateContext>({   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 (
    <LoginWrapper>
      <LoginContainer>
        <h2>登录</h2>
        <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!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 10, span: 14 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </LoginContainer>
    </LoginWrapper>
  )
}

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 (
    <HeaderWrapper className="header-wrapper">
      用户姓名：{ userInfo.userName }
    </HeaderWrapper>
  )
}

export default HeaderComps

 

这篇关于React useContext + useReducer 实现 Hooks 状态管理功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！