React Hooks with Redux持久化应用程序状态

Question

我刚开始学习react hook和react redux hook，到目前为止我已经了解了一切。但有一件事是不断地训练我的大脑，所以我想问问这里更有经验的开发人员。

如果我有一个更强大的应用程序，我打算让Redux负责整个状态，并想使用React钩子来消除副作用，我真的需要React钩子吗？

我有单独的功能层(容器=>，其中所有决策都是用redux做出的(和显示层(组件=>其中组件是哑的，并且只获得它们应该渲染的数据(

让我困扰的是，我在初始页面加载时调用了API，我想使用useEffecthook，但我不认为我应该这样做，因为我可以使用redux和useDispatch中的Selector。

这是我想更新为钩子样式的代码：

const mapStateToProps = (state) => {
return {
cities: state.weather.cities,
}
}
const mapDispatchToProps = (dispatch) => {
const fetchForUpdate = (cities) => {
return cities.map((city) => {
return dispatch({ type: FETCH_START, payload: city.name })
})
}
return {
fetchForUpdate: fetchForUpdate,
}
}
const WeatherListContainer = (props) => {
const { cities } = props
const cityData = cities.map((oneCity) => {
return (
<WeatherItemContainer
name={oneCity.name}
data={oneCity.data}
key={oneCity.name}
/>
)
})
return <WeatherList item={cityData} />
}
const enhance: Function = compose(
connect(mapStateToProps, mapDispatchToProps),
lifecycle({
componentDidMount() {
console.log(this.props.cities, 'this.props.cities')
this.props.fetchForUpdate(this.props.cities)
},
}),
)
export default enhance(WeatherListContainer)

如何使用redux钩子或react钩子获取？或者我可以合并它吗？比如使用useEffect，然后将其从本地商店保存到全局商店？是不是有点无效？

Answer 1

Redux需要Redux-thunk这样的中间件来调度异步操作(API调用(。如果你计划在整个应用程序中多次调用API，那么使用redux-thunk并调度异步操作是有意义的，尽管这种调度可能仍然需要在useEffect/componentDidMount中进行。如果您只计划一个API调用，或者某个特定的副作用对于一个组件是唯一的，则不需要实现中间件。对于单个API调用，您可以在useEffect/componentDidMount中发送请求，然后通过同步操作将结果发送到redux存储，而无需将其存储在组件状态中。

https://redux.js.org/advanced/async-actions

Answer 2

我认为有一些混淆。React钩子用于sideEffects，redux钩子用于更有效地使用商店。让我们考虑下面这样的场景。

您正在从API获取待办事项列表，并希望在整个应用程序中使用它。你有多个组件，每个组件都需要待办事项列表。在这种情况下，您将使用像redux-thunk这样的中间件或通过其他方式调用api，比如在useEffect中对其进行缩放(这不是一个好的做法(，并使用redux钩子将其保存到redux存储中。无论何时更新redux存储，都需要在组件中显示数据。我们将如何做到这一点？我们将使用react钩子来应用sideEffects。

在这里，我们将使用redux钩子从redux存储中获取数据。在像useEffect这样的reactHook中，我们将使用useState更新组件的状态。所以在这里你可以看到，reactHooks和reduxHooks在功能上完全不同。一个是存储和服务CCD_ 7的数据，另一个是当数据被添加或更新时显示CCD_。

希望你能理解。