Question

我正在研究React组件的这段代码：

https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-core/src/core/createStore.js

export default function createStore(initialState) {
  let state = initialState;
  const listeners = [];
  function dispatch() {
    listeners.forEach(listener => listener());
  }
  return {
    getState() {
      return state;
    },
    setState(nextState) {
      state = nextState;
      dispatch();
    },
    subscribe(listener) {
      listeners.push(listener);
      return function unsubcribe() {
        listeners.splice(listeners.indexOf(listener), 1);
      };
    },
  };
}

我很惊讶这段代码没有使用，而是自己的商店？有人可以向我解释一下此代码吗？这是使用全局存储而不使用Redux存储的一种方法？

此行：

listeners.forEach(listener => listener());

          return function unsubcribe() {
            listeners.splice(listeners.indexOf(listener), 1);
          };

什么意思？

Answer 1

这是类似Redux的商店的简化实现。它不涉及其他Redux实体，例如中间件或reducer。

setState完全符合预期，subscribe也是如此。

listeners.forEach(listener => listener())通知侦听器状态已更新。

return function unsubcribe() {...}返回一个使监听器退订状态更新的函数。

在React中使用自定义存储的Redux存储替代方案

1 个答案: