redux源码分析：极简版状态管理实现

一个极简的状态管理实现，只支持一个订阅，不支持中间件

先看代码

function createStore(reducer, initialState) {
  let currentState = initialState; // 1. 公共状态
  let listener = () => {};

  function getState() {
    // 2. getter
    return currentState;
  }
  function dispatch(action) {
    // 3. setter
    currentState = reducer(currentState, action); // 更新数据
    listener(); // 执行订阅函数
    return action;
  }
  function subscribe(newListener) {
    // 4. 发布订阅
    listener = newListener;
    // 取消订阅函数
    return function unsubscribe() {
      listener = () => {};
    };
  }
  return {
    getState,
    dispatch,
    subscribe,
  };
}

一些想法

1. 组件级别的多状态管理
2. 可以实现在不同的框架里(vue/react/小程序/app)
3.  状态管理范围：大于 setState，小于 redux，mobx 等

const initialState = { app: 'cool app', version: 'v1', keywords: 'who-am-i' };
const $ = useTinyStore(initialState, (state) => {
  console.log('state change: ', state)
});

// set
$.version = 'v2';
$.keywords = 'aric';

// get
const { version, keywords } = $;

// view
<View>
  Version is: {version}, Last keywords is {keywords}
</View>;

参考

https://littlehorsexie.github.io/Redux/code/redux/