React组件在Redux存储更改后不更新

我试图使用

useffect

hook在react组件中获取一些数据。初始渲染后，

fetchItems（）

获取项目并更新存储。但是，

项

即使在商店更新后仍然是空对象

我可能使用了

useffects

错误。如何将Redux与

useffects

一起使用？我想为组件设置一个加载状态，但由于组件只发送一个操作来获取项目（而不是直接调用API），因此它不知道何时获取数据以及何时更新存储以便可以提取数据

有人能帮我弄清楚如何确保在saga fetch和后续商店更新之后更新

items

对象吗

import React，{useState，useffect}来自“React”；
从'react redux'导入{connect}；
从“react router dom”导入{useParams}；
const ItemComponent=（{item，fetchItem}）=>{
const{itemId}=useParams（）；
const[isLoading，setIsLoading]=useState（false）；
useffect（（）=>{
setIsLoading（真）
fetchItem（itemId）
setIsLoading（错误）
}, []);
console.log（item）//即使在获取和存储更新之后也会提供空对象
}
常量mapStateToProps=（状态）=>{
返回{
项目：state.item
}
}
const mapDispatchToProps=（调度）=>{
返回{
fetchItem：（itemId）=>{dispatch（fetchItemActionCreator（itemId））}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（ItemComponent）；

• fetchItemActionCreator

  是创建要调度的操作的操作创建者
• 我的reducer和saga运行良好，因为我可以在控制台中看到存储操作和更新
• 如果我将

  items

  对象传递到

  useffect

  的依赖项数组中，那么将有一个无限循环，页面将继续重新呈现

减速器：

const itemReducer=（state={}，{type，payload}）=>{
开关（类型）{
案例项目获得成功：
返回{…状态，…有效负载}
默认值：返回状态
} 
} 

fetchItemActionCreator：

从'@reduxjs/toolkit'导入{createAction}；
export const fetchItemActionCreator=createAction（ITEM\u GET\u挂起）；

提前非常感谢

我想为组件设置加载状态

然后您可以处理组件中的加载状态

  const ItemComponent = ({ fetchItem, item, loading, error }) => {
    /** ... */
    /**
      Check for loading and show a spinner or anything like that
    */

    useEffect(() => {
      fetchItem(itemId);
    }, []);

    if (loading) return <ActivityIndicator />;
    if (item) return <View>{/* renderItem */}</View>;
    return null;
  };

constItemComponent=（{fetchItem，item，loading，error}）=>{
/** ... */
/**
检查加载情况并显示微调器或类似的东西
*/
useffect（（）=>{
fetchItem（itemId）；
}, []);
如果（装载）返回；
if（item）返回{/*renderItem*/}；
返回null；
};

您能否共享您的

项目缩减器

和

fetchItemActionCreator

const ItemComponent=（{item，fetchItem}）=>{

这是偶然的吗？刚刚添加了reducer和action creator。是的，

fetchItem

不是偶然添加到问题中的。谢谢您分享这个@Hend El Sahli。有没有办法使用

useEffect

来实现这一点？您需要在组件本身中引入数据吗？谢谢您的更新，@Hend El Sah我想知道，我是否不需要将

itemId

传递给

useffect

的依赖项数组？

  const ItemComponent = ({ fetchItem, item, loading, error }) => {
    /** ... */
    /**
      Check for loading and show a spinner or anything like that
    */

    useEffect(() => {
      fetchItem(itemId);
    }, []);

    if (loading) return <ActivityIndicator />;
    if (item) return <View>{/* renderItem */}</View>;
    return null;
  };