前言
各位使用 react 技术栈的小伙伴都不可避免的接触过redux react-redux的这套组合，众所周知 redux 是一个非常精简的库，它和 react 是没有做任何结合的，甚至可以在 vue 项目中使用。
redux 的核心状态管理实现其实就几行代码
代码语言：javascript复制function createStore(reducer) {
let currentState
let subscribers = []
function dispatch(action) {
currentState = reducer(currentState, action);
subscribers.forEach(s => s())
}
function getState() {
return currentState;
}
function subscribe(subscriber) {
subscribers.push(subscriber)
return function unsubscribe() {
...
}
}
dispatch({ type: 'INIT' });
return {
dispatch,
getState,
};
}
复制代码它就是利用闭包管理了 state 等变量，然后在 dispatch 的时候通过用户定义 reducer 拿到新状态赋值给 state，再把外部通过 subscribe 的订阅给触发一下。
那 redux 的实现简单了，react-redux 的实现肯定就需要相对复杂，它需要考虑如何和 react 的渲染结合起来，如何优化性能。
目标
- 本文目标是尽可能简短的实现
react-reduxv7 中的 hook 用法部分Provider,useSelector,useDispatch方法。（不实现connect方法） - 可能会和官方版本的一些复杂实现不一样，但是保证主要的流程一致。
- 用 TypeScript 实现，并且能获得完善的类型提示。
预览
预览地址：sl1673495.github.io/tiny-react-…
性能
说到性能这个点，自从 React Hook 推出以后，有了useContext和useReducer这些方便的 api，新的状态管理库如同雨后春笋版的冒了出来，其中的很多就是利用了Context做状态的向下传递。
举一个最简单的状态管理的例子
代码语言：javascript复制export const StoreContext = React.createContext();
function App({ children }) {
const [state, setState] = useState({});
return (
<StoreContext.Provider value={{ state, setState }}>
{children}
StoreContext.Provider>
);
}
function Son() {
const { state } = useContext(StoreContext);
return <div>state是{state.xxx}div>;
}
复制代码利用 useState 或者 useContext，可以很轻松的在所有组件之间通过 Context 共享状态。
但是这种模式的缺点在于 Context 会带来一定的性能问题，下面是 React 官方文档中的描述：
想像这样一个场景，在刚刚所描述的 Context 状态管理模式下，我们的全局状态中有count和message两个状态分别给通过StoreContext.Provider向下传递
Counter计数器组件使用了countChatroom聊天室组件使用了message
而在计数器组件通过 Context 中拿到的 setState 触发了count改变的时候，
由于聊天室组件也利用useContext消费了用于状态管理的 StoreContext，所以聊天室组件也会被强制重新渲染，这就造成了性能浪费。
虽然这种情况可以用useMemo进行优化，但是手动优化和管理依赖必然会带来一定程度的心智负担，而在不手动优化的情况下，肯定无法达到上面动图中的重渲染优化。
那么react-redux作为社区知名的状态管理库，肯定被很多大型项目所使用，大型项目里的状态可能分散在各个模块下，它是怎么解决上述的性能缺陷的呢？接着往下看吧。
缺陷示例
在我之前写的类 vuex 语法的状态管理库react-vuex-hook中，就会有这样的问题。因为它就是用了Context useReducer的模式。
你可以直接在 在线示例 这里，在左侧菜单栏选择需要优化的场景，即可看到上述性能问题的重现，优化方案也已经写在文档底部。
这也是为什么我觉得Context useReducer的模式更适合在小型模块之间共享状态，而不是在全局。
使用
本文的项目就上述性能场景提炼而成，由
聊天室组件，用了 store 中的count计数器组件，用了 store 中的message控制台组件，用来监控组件的重新渲染。
redux 的定义
redux 的使用很传统，跟着官方文档对于 TypeScript 的指导走起来，并且把类型定义和 store 都 export 出去。
代码语言：javascript复制import { createStore } from 'redux';
type AddAction = {
type: 'add';
};
type ChatAction = {
type: 'chat';
payload: string;
};
type LogAction = {
type: 'log';
payload: string;
};
const initState = {
message: 'Hello',
logs: [] as string[],
};
export type ActionType = AddAction | ChatAction | LogAction;
export type State = typeof initState;
function reducer(state: State, action: ActionType): State {
switch (action.type) {
case 'add':
return {
...state,
count: state.count 1,
};
case 'chat':
return {
...state,
message: action.payload,
};
case 'log':
return {
...state,
logs: [action.payload, ...state.logs],
};
default:
return initState;
}
}
export const store = createStore(reducer);
复制代码在组件中使用
代码语言：javascript复制import React, { useState, useCallback } from 'react';
import { Card, Button, Input } from 'antd';
import { Provider, useSelector, useDispatch } from '../src';
import { store, State, ActionType } from './store';
import './index.css';
import 'antd/dist/antd.css';
function Count() {
const count = useSelector((state: State) => state.count);
const dispatch = useDispatch();
// 同步的add
const add = useCallback(() => dispatch({ type: 'add' }), []);
dispatch({
type: 'log',
payload: '计数器组件重新渲染
