React Native，在 UseEffect 中调度后如何使用 Redux 存储？答案

【问题标题】：React Native, How to use Redux store after dispatching in UseEffect?React Native，在 UseEffect 中调度后如何使用 Redux 存储？
【发布时间】：2020-09-12 19:59:40
【问题描述】：

我有一个 react-native 功能组件，它使用 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>)

问题是 useEffect 中的 fieldFromStore 将始终为 null，因为在渲染 useEffect 期间，商店尚未更新。

我在这里违反了某种最佳实践吗？如何调度一个操作来更新 Store，然后使用该数据来确定页面的呈现方式？

非常感谢您的帮助。

【问题讨论】：

标签： react-native redux react-redux react-hooks use-effect

【解决方案1】：

使用第二个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])

  // ...
}

【讨论】：

啊，我错了，我可以多次使用useEffect！！谢谢！

【解决方案2】：

您可以使用 useEffect 的依赖数组来控制哪些选择器将导致您的函数再次运行。因此，不要使用 useEffect 尾部的空数组，而是使用 [ fieldFromStore ]。为了清楚起见，下面的完整功能

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

“最佳实践”这可能违反是它将在选择器更改时再次调度您的操作。解决此问题的一种方法是在导航到您所在的组件之前调度操作，然后在此处重新渲染会更清晰。

【讨论】：