javascript - 为什么最后一个console.log中的listeners数组长度是3而不是2？

Question

我正在编写自己的 Redux 小版本，以了解它的底层工作原理。

在下面给出的代码中，我想知道为什么最后一个控制台日志没有产生预期的输出。

代码中的注释清楚地描述了问题。帮助任何人-

function createStore(reducer) {
  let state;

  let listeners = [];
  const getState = () => state;

  const subscribe = listener => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(thisListener => thisListener !== listener);
    };
  };

  const getListeners=()=>{
    return listeners
  }

  const dispatch = action => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  return {
    getState,
    subscribe,
    dispatch,
    listeners,
    getListeners
  };
}

// Create the store-
const store = createStore();

// Subscribing to store changes
store.subscribe(() => {
  console.log("The new state is: ", store.getState());
});

// To check the number of items present in listeners array
console.log("1. store.listeners",store.listeners.length)  // prints length- 1, as expected
console.log("1. store.getListeners",store.getListeners().length) // prints length- 1, as expected

store.subscribe(() => {
  console.log("State changes");
});

console.log("2. store.listeners",store.listeners.length) // prints length- 2, as expected
console.log("2. store.getListeners",store.getListeners().length) // prints length- 2, as expected

const unsubscribe= store.subscribe(() => {
  console.log("State changes");
});

console.log("3. store.listeners",store.listeners.length) // prints length- 3 as expected
console.log("3. store.getListeners",store.getListeners().length) // prints length- 3 as expected

unsubscribe()

console.log("4. store.listeners",store.listeners.length) // printed length- 3 ( Why not 2?)
console.log("4. store.getListeners",store.getListeners().length) // prints length- 2, as expected

Answer 1

listeners.filter 返回新数组。但是从 createStore 返回的对象将始终具有初始引用。

您可以使用splice来就地修改数组。

function createStore(reducer) {
  let state;

  let listeners = [];
  const getState = () => state;

  const subscribe = listener => {
    listeners.push(listener);
    return () => {
      listeners.splice(listeners.indexOf(listener), 1);
    };
  };

  const getListeners=()=>{
    return listeners
  }

  const dispatch = action => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };

  return {
    getState,
    subscribe,
    dispatch,
    listeners,
    getListeners
  };
}

// Create the store-
const store = createStore();

// Subscribing to store changes
store.subscribe(() => {
  console.log("The new state is: ", store.getState());
});

// To check the number of items present in listeners array
console.log("1. store.listeners",store.listeners.length)  // prints length- 1, as expected
console.log("1. store.getListeners",store.getListeners().length) // prints length- 1, as expected

store.subscribe(() => {
  console.log("State changes");
});

console.log("2. store.listeners",store.listeners.length) // prints length- 2, as expected
console.log("2. store.getListeners",store.getListeners().length) // prints length- 2, as expected

const unsubscribe= store.subscribe(() => {
  console.log("State changes");
});

console.log("3. store.listeners",store.listeners.length) // prints length- 3 as expected
console.log("3. store.getListeners",store.getListeners().length) // prints length- 3 as expected

unsubscribe()

console.log("4. store.listeners",store.listeners.length) // printed length- 3 ( Why not 2?)
console.log("4. store.getListeners",store.getListeners().length) // prints length- 2, as expected