Блог

Мое приложение содержит два компонента,

1. ListComponent(родительский), который содержит список пользователей,
2. Пользовательский компонент (дочерний), который отображает информацию о пользователе

Страница списка пользователей:

 <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
}
 

Я использую состояние redux для хранения списка пользователей, когда пользователь (пользователь устройства) нажимает на значок пользователя, который отправляет пользовательские реквизиты в UserComponent, там я показываю информацию о пользователе. Если пользователь (пользователь устройства) нажимает на кнопку «Следовать», а затем обновляет информацию о бэкэнде и профиле пользователя с помощью redux amp; redux-saga.

1. Из приведенного выше кода невозможно обновить пользовательские данные глобально (состояние Redux)
2. Или я могу обновить весь список?
3. Я следую правильному подходу?

Два способа решения таких общих проблем.

1. Из родительского компонента отправьте метод в качестве поддержки дочернему компоненту. Внутри этого метода отправка действия для обновления хранилища .. и т.д. Внутри дочернего компонента, например

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

   внутри родительского перехватите этот метод и обновите хранилище .. пример

   <ChildComponent methodFromParent={(someData)=>this.methodFromParent(someData)} .. Теперь внутри methodFromParent обновите хранилище

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

2. Сформируйте сам дочерний компонент .. используя store.dispatch() so, сначала импортируйте хранилище внутри дочернего компонента, затем вы можете использовать sotre.dispatch(someaction) . Но этот подход не очень хорош.. вы должны настроить свой проект в соответствии с вышеупомянутым подходом. И используйте их store.dispatch(), store.getState() . В случае чрезвычайной ситуации, когда у вас нет доступа к mapStateToProps и т. Д.