React结合rxjs全局状态管理

读前必备

1. react相关知识
2. promise和eventEmitter / bus / 事件发布订阅模式 相关知识
3. 状态管理相关知识
4. react hooks

---

需求点

在全局共享登录状态，假设就是这样的需求

---

rxjs写法

如果你只在乎rxjs的内容，那么在下面的demo后，就可以离开了，后面的
内容只是分析为什么使用rxjs

定义subject

// UserSubject.js
import {BehaviorSubject} from 'rxjs';
export const userSubject = new BehaviorSubject({
	username: '',
	token: '',
	// ...
})

定义rx对象，rx对象是修改subject的唯一途径，不需要一定是同步函数

// UserRx.js
import {userSubject} from '@/subjects/UserSubject';

export const userRx = {
	
	// 登录，登录后保存登录信息
	async login(username, password){
		let res = await loginApi.normLogin(username,password);
		userSubject.next({
			...res
		})
	}
	
	// 清空登录信息
	async claer(){
		userSubject.next({});
	}
}

定义service对象，转发rx的方法

import {userRx} from '@/rx/UserRx';

export const userService = {
	...userRx
}

最后是组件

import React,{useState} from 'react';
import {useObservable} from 'rxjs-hooks';
import {userSubject} from '@/subjects/UserSubject';
import {userService} from '@/services/UserService';

// 登录组件，登录后保存当前登录信息
export function Login(){
	let [username,setUsername] = useState('');
	let [password,setPassword] = useState('');

	return (
		用户名
		<input onInput={e=>setUsername(e.target.value)}/>
		密码
		<input onInput={e=>setPassword(e.target.value)}/>
		<button onClick={()=>userService.login(username,password)}>登录</button>
	)
}

// 首页组件
export function Home(){
	let userModel = useObservable(userSubject.asObservable())||userSubject.value;

	return (
		<!--这里的userModel的结构与userSubject里传入的结构一致-->
		<div>当前登录用户名为: {userModel.username}</div>
	)
}

---

数据流向

上面我们定义了4个对象， subject、rx、service、组件

subject对象

// 没发完，加班