如果未传入,useSelector 从哪里拉取状态?

Where does useSelector Pull State from if it is Not Passed In?

下面的截图来自 Maximilian Schwarzmüller 的 Udemy 课程“React - The Complete Guide (incl Hooks, React Router, Redux)”

当使用useSelector访问状态的某些部分时,状态传入的位置并不明显。在下面的截图中,Max执行useSelector访问cartIsVisible ui reducer 的方法 - 但他如何访问状态本身?由于 useSelector 只是从 react-redux 中获取的一个钩子,并没有传入任何其他内容,那么他​​如何访问状态?当我尝试 console.log(state) 时,它显示未定义状态的错误。

如果您查看 index.js,您应该会看到一个 <Provider 包装 App 组件

<Provider store={store}>
  <App />
</Provider>

useSelector 挂钩从包装器 <Provider 组件中发送的 redux store 获取状态。

Provider 使 Redux 存储可用于下面的组件层次结构。

在这种情况下,state 是 useSelector 挂钩的参数。你不能 console.log state 因为它属于 useSelector 钩子,我相信它超出了你尝试 console.log.

的范围

以下内容直接来自 React Redux documentation 关于此事:

The selector is approximately equivalent to the mapStateToProps argument to connect conceptually. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders (unless its reference hasn't changed since a previous render of the component so that a cached result can be returned by the hook without re-running the selector). useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.

我是 Redux 的维护者和最近几个 React-Redux 版本的作者。

在内部,useSelector 通过 useContext 挂钩访问 Redux 存储。然后它调用 store.subscribe() 以在任何时间调度操作时得到通知,并使用 store.getState() 获取最新状态。最后,它调用 yourSelector(state).

查看我的详尽 post The History and Implementation of React-Redux and talk ReactNext 2019: A Deep Dive into React-Redux 以了解有关 React-Redux 内部工作原理的更多详细信息。