React Hooks 入门教程五：useReducer结合useContext 实现 Redux 组件间共享状态管理，简单用户登录示例教程

本教程是React Hooks系统教程中的一部分。

React Hooks 的 useReducer/useContext 已经基本可以实现类似 Redux 的状态管理。

示例说明

我们接下来会制作一个较为完整的用户登录并显示用户信息的例子。为了尽量模拟真实场景，我们会将不同功能的组件放到不同的文件中，该实列统一放到了 ExampleUserLogin 目录下。

UserProvder.js

UserProvider.js 用来存放共享状态，并提供一个向子组件传递 userInfo/ userDispatcher 的容器。这里简化了 UserReducer 的逻辑。

import React, { createContext, useReducer } from 'react';

export const UserContext = createContext({});
export const UserReducer = (userInfo, action) => {
  if (action.error) return { error: action.error };
  return action;
}

export const UserProvider = props => {
  const [userInfo, userDispatcher] = useReducer(UserReducer, {});

  return (
    <UserContext.Provider value={{ userInfo, userDispatcher }}>
      {props.children}
    </UserContext.Provider>
  )
}

ExampleUserLogin.js

是登录模块的入口函数，引用 UserProvider 向 Login 和 Welcome 两个子模块传递 userInfo 状态和 userDispatcher 事件触发器。

import React from 'react';
import { Login } from "./Login";
import { Welcome } from "./Welcome";
import { UserProvider } from './UserProvider';

export function ExampleUserLogin() {
 
  return (
    <div>
      <hr/> <h1>Example: UserLogin</h1>
      <UserProvider>
        <Login/>
        <Welcome/>
      </UserProvider>
    </div>
  )
}

Login.js

login.js 显示登录界面并向后台发送 ajax 信息进行登录，然后通过 userDispatcher 事件派发器通知其它组件。

import React, { useContext } from 'react';
import { UserContext } from './UserProvider';

export function Login() {
  let { loginInfo, userDispatcher } = useContext(UserContext);

  let loginHandler = (e) => {
    e.preventDefault()
    fetch('/json/user.login.json')
      .then((res)=>{ return res.json() })
      .then((userInfo)=>{
        userDispatcher(userInfo)
      })
      .catch((err)=>{
        userDispatcher({ error: 'Login Error' })
      })
  }

  return (
    <div>
      <h1>Login Component</h1>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
      <button onClick={loginHandler}>Login</button>
    </div>
  )
}

Welcome.js

welcome.js 接收父容器传递的 userInfo，并显示用户信息。

import React, { useContext } from 'react';
import { UserContext } from './UserProvider';

export function Welcome() {
  let {userInfo, userDispatcher} = useContext(UserContext);

  return (
    <div>
      <h1>Welcome Component</h1>
      <ul>
        <li>Username: {userInfo.username}</li>
        <li>Email: {userInfo.email}</li>
        <li>Age: {userInfo.age}</li>
      </ul>
    </div>
  )
}

至此一个完整的用户登录功能完成。

完整示例：