REACT：如何构建类似于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);