React Native, как использовать Redux store после отправки в UseEffect? - PullRequest
Новая
       124

React Native, как использовать Redux store после отправки в UseEffect?

1 голос
/ 26 мая 2020

У меня есть функциональный компонент, поддерживающий реакцию, который использует UseEffect для отправки действия в хранилище Redux для обновления поля. После обновления поля я хотел бы, чтобы компонент использовал данные, чтобы решить, отображать ли данные или уйти. 

const myScreen = props => {

    const fieldFromStore = useSelector(state=> state.mystore.myfield)

    useEffect(
      ()=>{
          dispatch(actionThatWillUpdateMyField)
          if (fieldFromStore == Something){
                props.navigation.navigate('NextPage')
             } //else just render the rest of the screen
          }, [])

    return (
            <View> 
                  <Text> {fieldfromStore}</Text>
            <View>)

Проблема в том, что fieldFromStore в использовании этот рендер useEffect в магазине еще не обновлен.

Нарушаю ли я здесь какую-то передовую практику? Как я могу отправить действие для обновления Store, а затем использовать эти данные для определения того, как отображается страница?

Большое спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 26 мая 2020

Используйте 2-й блок useEffect() для обработки изменения поля. Второй блок должен иметь fieldFromStore в качестве зависимости, поэтому он будет реагировать на изменения в поле: 

const myScreen = props => {

  const fieldFromStore = useSelector(state => state.mystore.myfield)

  useEffect(() => {
    dispatch(actionThatWillUpdateMyField)
  }, [])

  useEffect(() => {
    if (fieldFromStore === Something) {
      props.navigation.navigate('NextPage')
    } //else just render the rest of the screen
  }, [fieldFromStore, props.navigation])

  // ...
}
0 голосов
/ 26 мая 2020

Вы можете использовать массив зависимостей useEffect для управления тем, какие селекторы будут вызывать повторный запуск вашей функции. Итак, вместо пустого массива в конце вашего useEffect используйте [ fieldFromStore ]. Полная функция ниже для ясности 

   useEffect(()=> {
      dispatch(actionThatWillUpdateMyField)
      if (fieldFromStore == Something) {
          props.navigation.navigate('NextPage')
      } //else just render the rest of the screen
   }, [ fieldFromStore ]);

«Лучшие практики», которые могут быть нарушены, заключаются в том, что он будет отправлять ваше действие снова при изменении селектора. Один из способов обойти это - отправить действие до того, как вы перейдете к компоненту, в котором вы работаете, а затем повторный рендеринг здесь будет более чистым.

...