Реагировать на хуки с Redux, сохраняющими состояние приложения - PullRequest
Новая
       123

Реагировать на хуки с Redux, сохраняющими состояние приложения

0 голосов
/ 12 июля 2020

Я только начал изучать перехватчики реакции и перехватчики реакции-редукции и насколько я понял все. Но одно - продолжать сверлить мой мозг, поэтому я хотел бы попросить здесь более опытных разработчиков. побочные эффекты, действительно ли мне нужны React Hooks?

У меня есть отдельный функциональный уровень (контейнеры =>, где все решения принимаются с помощью redux) и слой отображения (компоненты => где компоненты тупые и получают только данные они предполагаются для рендеринга)

Что меня беспокоит, так это то, что я делаю вызов API при начальной загрузке страницы, и я хотел бы использовать хук useEffect, но я не убежден, что я должен это сделать, когда я могу использоватьSelector из 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, а затем сохранить его из локального магазина в глобальный? Разве это немного неэффективно?

Ответы [ 2 ]

0 голосов
/ 12 июля 2020

Думаю, есть некоторые недоразумения. Перехватчики React используются для побочных эффектов, а перехватчики redux предназначены для более эффективного использования магазина. Давайте рассмотрим сценарий, подобный приведенному ниже.

Вы получаете список задач из API и хотите использовать его во всем приложении. У вас есть несколько компонентов, и вам понадобится список дел в каждом компоненте. В этом случае вы вызовете api либо с помощью промежуточного программного обеспечения, такого как redux-thunk, либо другими способами, например, вызывая его в useEffect (что не является хорошей практикой), и сохраните его в хранилище redux с помощью перехватчиков redux. И всякий раз, когда ваше хранилище redux обновляется, вам нужно будет отображать данные в компонентах. Как мы это сделаем? мы будем использовать перехватчики реакции для применения sideEffects.

Здесь мы получим данные из хранилища redux с помощью перехватчиков redux. Затем в reactHooks вроде useEffect мы обновим состояние компонента, используя useState. Итак, здесь вы можете видеть, что reactHooks и reduxHooks полностью различаются по функциональности. один хранит и обслуживает данные reduxHooks, а другой показывает данные, когда они добавляются или обновляются, а именно reactHooks.

Надеюсь, вы сочтете это понятным.

0 голосов
/ 12 июля 2020

Redux требует промежуточного программного обеспечения, такого как redux-thunk, для отправки асинхронных действий (вызов API). Если вы планируете вызывать API несколько раз в своем приложении, имеет смысл использовать redux-thunk и отправлять асинхронное действие, хотя эта отправка может все еще происходить в useEffect / componentDidMount. Если вы планируете только один вызов API или если определенный побочный эффект c уникален для одного компонента, нет необходимости реализовывать промежуточное ПО. Для одного вызова API вы можете отправить свой запрос в useEffect / componentDidMount, а затем отправить результат синхронным действием в хранилище redux, без необходимости сохранять его в состоянии компонента.

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

...