我们如何使用 React-Redux Hooks API 使用 useSelector() 和 useDispatch() 创建多个 Reducer？答案

【问题标题】：How can we create more than one Reducers using React-Redux Hooks API using useSelector() and useDispatch()?我们如何使用 React-Redux Hooks API 使用 useSelector() 和 useDispatch() 创建多个 Reducer？
【发布时间】：2019-09-16 12:51:05
【问题描述】：

如果我们制作多个 reducer，我们会使用 combineReducers 组合它，但是当 useSelector 从哪个 Reducers 获取状态时？

【问题讨论】：

标签： reactjs react-redux react-hooks

【解决方案1】：

来自 React-Redux docs：

const result : any = useSelector(selector : Function, equalityFn? : Function)

允许您使用选择器函数从 Redux 存储状态中提取数据

就像mapStateToProps 工作一样，选择器函数接收由所有reducer 组合的存储状态。

假设您有两个 reducer，一个名为 counterReducer，另一个名为 timeReducer，您需要其中一个的数据：

const counter = useSelector(state => state.counterReducer.data)

或者

const counter = useSelector({counterReducer} => counterReducer.data)

【讨论】：

感谢 Matan，最后我没有包含 .data。现在它完美地工作了。

【解决方案2】：

useSelector 传递给您的entire Redux store state as its only argument。因此，如果您有两个 reducer，它们的命名空间分别为 foo 和 bar

rootReducer = combineReducers({foo: fooReducer, bar: barReducer})

你可以这样访问它们：

// state is your entire redux store
useSelector((state) => {
  console.log(state.foo);
  console.log(state.bar);
})

【讨论】：

谢谢，Galupuf。我在控制台上获得了状态，但我如何在 DOM 中显示它？