React Hooks 与 Redux 持久化应用程序 state

Question

我刚开始学习反应钩子和 react-redux 钩子，据我所知一切。 但有一件事是不断地钻研我的大脑，所以我想在这里询问更多有经验的开发人员。

如果我有更强大的应用程序，我打算让 Redux 照顾整个 state 并想使用 React hooks 来避免副作用，我真的需要 React Hooks 吗？

我有单独的功能层（容器=>所有决策都是用redux做出的）和显示层（组件=>组件是哑的，只获取它们应该呈现的数据）

困扰我的是我在初始页面加载时调用了 API 并且我想使用 useEffect 挂钩，但我不相信当我可以从 redux 和 useDispatch 使用选择器时我应该这样做。

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

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 挂钩或反应挂钩来获取？ 或者我可以结合它吗？ 喜欢使用 useEffect 然后将其从本地存储保存到全局存储？ 是不是有点无效？

Answer 1

Redux 需要诸如 redux-thunk 之类的中间件来调度异步操作（API 调用）。 如果您计划在整个应用程序中多次调用 API，则使用 redux-thunk 并调度异步操作是有意义的，尽管此调度可能仍需要在 useEffect/componentDidMount 中发生。 如果您只计划单个 API 调用，或者如果特定的副作用是一个组件独有的，则无需实现中间件。 对于单个 API 调用，您可以在 useEffect/componentDidMount 中发送您的请求，然后通过同步操作将结果分派到 redux 存储，而不必将其存储在组件 Z9ED39E2EA9314586B6A985A6 中。

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

Answer 2

我认为存在一些混淆。 React hooks 用于 sideEffects，其中 redux hooks 用于更有效地使用 store。 让我们考虑一个像下面这样的场景。

您正在从 API 获取待办事项列表，并希望在整个应用程序中使用它。 你有多个组件，你需要每个组件中的待办事项列表。 在这种情况下，您将调用 api 或者使用redux-thunk之类的中间件或通过其他方式（例如在useEffect中调用它（这不是一个好习惯））并使用 Z74909FE17CAEC373F28B 将其保存到 redux 存储。 并且每当您更新 redux 存储时，您都需要在组件中显示数据。 我们将如何做到这一点？ 我们将使用反应钩子来应用副作用。

在这里，我们将使用 redux 挂钩从 redux 商店获取数据。 比在像useEffect这样的 reactHooks 中，我们将使用 useState 更新组件的useState 。 所以在这里你可以看到， reactHooks和reduxHooks在功能上是完全不同的。 一个是存储和提供数据，它是reduxHooks ，另一个是在添加或更新数据时显示数据，它是reactHooks 。

希望你会觉得它是可以理解的。