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

Question

我有一个反应原生功能组件，它使用 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 in useEffect 在效果下将始终为空，因为在 useEffect 渲染期间，存储尚未更新。

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

非常感谢您的帮助。

Answer 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])
// ...
}

Answer 2

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

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

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