时间戳

首页 > 解决方案 > 将数据从父组件传递到子组件时如何处理redux状态

reactjs - 将数据从父组件传递到子组件时如何处理redux状态

问题描述

我的应用程序包含两个组件，

  1. ListComponent(parent) 包含用户列表，
  2. 显示用户信息的 UserComponent(child)

用户列表页面：

<ListComponent 
   data={this.props.users} 
   renderItem={(item) => <UserComponent user={item} />}
/>

用户页面：

render(){
    let { user, followers } = this.props;
    user = {
    ...user,
    ...followers
}
    return (
<div> 
   <span>{user.totalFollowers}</span>
   <button onClick={() => reduxHelper(user.totalFollowers + 1)}></button>
</div>)
}

状态道具：

mapStatetoProps = (state) => ({
  followers: state.user.followers 
})

减速器：

initial_state = {
followers: {}
}

成功后：

followers: {
   totalFollowers: action.totalFollowers
}

当用户（设备用户）单击将用户道具发送到 UserComponent 的用户图标时，我正在使用 redux 状态来保存用户列表，我在那里显示用户信息。如果用户（设备用户）单击关注按钮，则使用 redux 和 redux-saga 更新后端和用户配置文件信息。

  1. 从上面的代码无法全局更新用户数据（Redux 状态）
  2. 或者我可以更新整个列表吗？
  3. 我是否遵循正确的方法？

标签： reactjsreduxredux-saga

解决方案

处理此类通用问题的两种方法。

  1. 从父组件向子组件发送一个方法作为道具。在此方法内部调度操作以更新商店.. 等在子组件内部用于 ex

    <div onClick={()=>this.props.methodFromParent(send some data if needed)}

    在 Parent 内部捕获该方法并更新商店.. ex

    <ChildComponent methodFromParent={(someData)=>this.methodFromParent(someData)} .. 现在在methodFromParent里面更新store

    methodFromParent = ()=>{this.props.dispatch(whatever workflow u r using)}

  2. 形成子组件本身..使用store.dispatch() 所以首先在子组件内导入存储然后你可以使用sotre.dispatch(someaction)。但是这种方法不好..您应该按照上述方法设置您的项目。并使用这些store.dispatch(), store.getState(). 在紧急情况下，您无法访问 mapStateToProps 等。

推荐阅读