как обрабатывать состояние избыточности при передаче данных от родительского к дочернему компоненту - PullRequest
Новая
       13

как обрабатывать состояние избыточности при передаче данных от родительского к дочернему компоненту

1 голос
/ 15 апреля 2019

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

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

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

<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. Там я показываю информацию о пользователе. Если пользователь (пользователь устройства) нажимает кнопку «Follow», то обновляет информацию о бэкенде и профиле пользователя с помощью redux & redux-saga.

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

1 Ответ

0 голосов
/ 15 апреля 2019

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

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

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

    внутри Parent перехватите этот метод и обновите хранилище .. ex

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

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

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

...