Redux自定义观测存储函数的类型

Question

我正在尝试将Redux实现转换为类型记录，但在制作observeStore效用函数类型文件时遇到了困难。

这是最初的功能：

function observeStore(store, select, onChange) {
  let currentState;

  function handleChange() {
    let nextState = select(store.getState());
    if (nextState !== currentState) {
      currentState = nextState;
      onChange(currentState);
    }
  }

  let unsubscribe = store.subscribe(handleChange);
  handleChange();
  return unsubscribe;
}

• 如何确保select-function实际返回状态的一部分(通常是嵌套的对象或值)？
• 如何将返回类型从select-parameter传递给onChange-parameter？

我已经尝试过这样的方法，但没有成功：

function observeStore(store: RootState, select: (RootState) => PartOf???<RootState>, onChange: (ReturnType<typeof select>) => void): Unsubscribe

Answer 1

类型取决于所选值的类型，因此需要使用泛型函数。根据您的尝试，我假设RootState是一个已知的值，所以我们需要的唯一通用值是选择器的返回类型。

• store是整个存储库(而不是状态)，因此我们使用从redux导入的Store类型，状态泛型设置为RootState
• select是一个从状态中选择某些内容的函数，因此它接受RootState并返回T
• onChange是一个函数，它接受选定的值T并返回void
• currentState是选定的值T，但它最初是undefined。

import {Store, Unsubscribe} from "redux";

function observeStore<T>(
  store: Store<RootState>,
  select: (state: RootState) => T,
  onChange: (selected: T) => void
): Unsubscribe {

  let currentState: T | undefined;

  function handleChange() {
    let nextState = select(store.getState());
    if (nextState !== currentState) {
      currentState = nextState;
      onChange(currentState);
    }
  }

  let unsubscribe = store.subscribe(handleChange);
  handleChange();
  return unsubscribe;
}

打字稿游乐场链接