Question

我有一个本机的功能组件，该组件使用UseEffect将操作分派到Redux存储以更新字段。字段更新后，我希望组件使用数据来决定是显示数据还是导航。

add_edge

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

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

非常感谢您的帮助。

Answer 1

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

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

在“最佳实践”这可能违反的是，当选择变化，它会再次派遣你的行动。解决此问题的一种方法是在导航到要使用的组件之前先分派操作，然后在此处重新渲染会更干净。

Answer 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])

  // ...
}

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

2 个答案: