React-Redux 100行代码简易版探究原理。（面试热点，React Hook + TypeScript实现）

相关文章推荐

刚毅的紫菜 · React-Redux Hooks 中文 - 简书· 3 月前 ·

大力的充值卡 · Redux原理（一）：Store实现分析 ...· 3 月前 ·

失落的棒棒糖 · 手写一个Redux，深入理解其原理 - ...· 3 月前 ·

冷冷的芒果 · endnote，插文献时显示服务器运行失败 ...· 4 月前 ·

刚毅的棒棒糖 · 二十一、redux & mobx - 知乎· 5 月前 ·

温文尔雅的大白菜 · 李兴志督导高速公路“三保三大一创”工作-工作 ...· 6 天前 ·

温柔的炒粉 · 泌阳县梅林寺和梅林中学的历史· 2 月前 ·

风流的足球 · 豆瓣4万人打出高分！这本书能治精神内耗？ ...· 3 月前 ·

高兴的鸭蛋 · 重生国民千金_百度百科· 1 年前 ·

慈祥的紫菜汤 · 司法文明指数：尝试量化评估司法建设_中华人民 ...· 1 年前 ·

腾讯云

备案控制台

开发者社区

TVP

文章/答案/技术大牛

写文章

专栏首页前端从进阶到入院 React-Redux 100行代码简易版探究原理。（面试热点，React Hook + TypeScript实现）

2 0

分享

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,
复制代码

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>;
复制代码

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);
复制代码

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<ActionType>();
  // 同步的add
  const add = useCallback(() => dispatch({ type: 'add' }), []);
  dispatch({
    type: 'log',
    payload: '计数器组件重新渲染?',
  return (
    <Card hoverable style={{ marginBottom: 24 }}>
      <h1>计数器</h1>
      <div className="chunk">
        <div className="chunk">store中的count现在是 {count}</div>
        <Button onClick={add}>add</Button>
    </Card>
export default () => {
  return (
    <Provider store={store}>
      <Count />
    </Provider>
复制代码

import React, { useContext } from 'react';
import { Store } from 'redux';
interface ContextType {
  store: Store;
export const Context = React.createContext<ContextType | null>(null);
export function useReduxContext() {
  const contextValue = useContext(Context);
  if (!contextValue) {
    throw new Error(
      'could not find react-redux context value; please ensure the component is wrapped in a <Provider>',
  return contextValue;
复制代码

import React, { FC } from 'react';
import { Store } from 'redux';
import { Context } from './Context';
interface ProviderProps {
  store: Store;
export const Provider: FC<ProviderProps> = ({ store, children }) => {
  return <Context.Provider value={{ store }}>{children}</Context.Provider>;
复制代码

import { useReduxContext } from './Context';
import { Dispatch, Action } from 'redux';
export function useDispatch<A extends Action>() {
  const { store } = useReduxContext();
  return store.dispatch as Dispatch<A>;
复制代码

import { useReducer, useRef, useEffect } from 'react';
import { useReduxContext } from './Context';
type Selector<State, Selected> = (state: State) => Selected;
type EqualityFn<Selected> = (a: Selected, b: Selected) => boolean;
// 默认比较的方法
const defaultEqualityFn = <T>(a: T, b: T) => a === b;
export function useSelector<State, Selected>(
  selector: Selector<State, Selected>,
  equalityFn: EqualityFn<Selected> = defaultEqualityFn,
  const { store } = useReduxContext();
  // 强制让当前组件渲染的方法。
  const [, forceRender] = useReducer(s => s + 1, 0);
  // 存储上一次selector的返回值。
  const latestSelectedState = useRef<Selected>();
  // 根据用户传入的selector，从store中拿到用户想要的值。
  const selectedState = selector(store.getState());
  // 检查是否需要强制更新
  function checkForUpdates() {
    // 从store中拿到最新的值
    const newSelectedState = selector(store.getState());
    // 如果比较相等，就啥也不做
    if (equalityFn(newSelectedState, latestSelectedState.current)) {
      return;
    // 否则更新ref中保存的上一次渲染的值
    // 然后强制渲染
    latestSelectedState.current = newSelectedState;
    forceRender();
  // 组件第一次渲染后 执行订阅store的逻辑
  useEffect(() => {
    // ?重点，去订阅redux store的变化
    // 在用户调用了dispatch后，执行checkForUpdates
    const unsubscribe = store.subscribe(checkForUpdates);
    // 组件被销毁后 需要调用unsubscribe停止订阅
    return unsubscribe;
  }, []);

ssh_晨曦时梦见兮

React-Redux 100行代码简易版探究原理。（面试热点，React Hook + TypeScript实现）

React-Redux 100行代码简易版探究原理。（面试热点，React Hook + TypeScript实现）

前言

目标

预览

性能

缺陷示例

使用

redux的定义

在组件中使用

实现

实现Context

实现Provider

实现useDispatch

实现useSelector