React Hooks with Redux persisting the App state

Question

I just started learning react hooks and react-redux hooks and as far I understood everything. But one thing is keep drilling my brain, so I would like to ask more experienced developers here.

If I have more robust app, where I intend to have Redux taking care of whole state and wanna use React hooks fro side effects, do I really need React Hooks?

I have separate functional layer (containers => where all the decisions are being made with redux) and displaying layer (components => where components are dumb and obtain just data they are suppose to render)

Whats bugging me is I make a API call in initial page loading and I would like to use useEffect hook, but im not conviced I should do that when I can useSelector from redux and useDispatch.

here is the code I would like to update into hook style:

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)

how can I fetch with redux hooks or react hooks? Or can I combine it? like use useEffect and then save it from local store to global store? Isnt it a bit ineffective?

Pavlos Karalis Pavlos Karalis · Accepted Answer · 2020-07-12T17:23:38

Redux requires a middleware such as redux-thunk to dispatch asynchronous actions (an API call). If you plan on calling an API multiple times throughout your app, it makes sense to use redux-thunk and dispatch an asynchronous action, though this dispatch might still need to occur within useEffect/componentDidMount. If you only plan on a single API call, or if a specific side effect is unique to one component, there is no need to implement the middleware. For a single API call, you can send your request within useEffect/componentDidMount and then dispatch the result with a synchronous action to the redux store, without having to ever store it in component state.

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

React Hooks with Redux persisting the App state

2 Answers