反应：如何构建类似于redux useSelector

Question

我正在尝试构建一个钩子，该钩子将从对象返回键-值对的选定子集。假设该钩子可以访问如下所示的对象：

const stores = { someStore: { someField: 'fieldValue' } }

我们如何将回调传递给钩子以从stores对象中选择字段？ 理想的情况是使钩子像这样：

const {selectedField} = useStores(stores => ({ selectedField: stores.someStore.someField }))

此挂钩的目标是替换我的代码库中的MobX @inject(stores => ({...}))。

Answer 1

只需针对stores

运行选择器

function useStores(selector) {
  const stores = { someStore: { someField: 'fieldValue' } };
  
  return selector(stores); 
}

const { selectedField } = useStores(stores => ({ selectedField: stores.someStore.someField }));

console.log(selectedField);