Задать вопрос
@iBubnov

React + Redux. Как делать Dispatch древовидных данных чтобы отрендерился только вложенный компонент?

Всем привет. Столкнулся с задачей, где на странице около 100 блоков (отдельные компоненты в цикле).
В каждом блоке есть инпуты, которые при onChange делают диспатч. Каждый раз, когда делаю dispatch заново рендерятся все эти 100 блоков, что жудко тормозит.
Я понимаю, что это все оптимизировать можно с помощью setState() , тогда будет ререндер текущего компонента. Но тогда мне придется собирать данные из каждого компонента, компоновать и отправлять на сервер. Тогда нафига Redux )
Попробую кратно показать код:
//Reducer
const initialState = {
      quiz: {},
}
export default function reducer(state = initialState, action = {}) {

    switch(action.type){
        case 'UPDATE_QUIZ' : return state = {...state, quiz: action.payload};
    }
    return state;
}


// Компонент

render(){

    return(
          <Quiz>
                {this.props.quiz.questions.map((question) => {

                    <Question key={question.hash}> 
                         {question.answers.map((answer) => {

                               <Answer answer={answer} key={answer.hash}/>
}) }

                   </Question>

})}

  )
}

// Answer Component
    render(){
       return(
          <div> <input name='name' value={this.props.answer.name} onChange={(e)=>{
                this.props.dispatch(updateAnswer())

}}> </div>
)

}


// Action updateAnwer()
 function updateAnsert(){
     // Тут я беру из редукс стора такие данные 
    let newQuiz =  quiz.questions[qIndex].answers[aIndex].name = value
    return {type: 'UPDATE_QUIZ, payload: newQuiz}
}
  • Вопрос задан
  • 417 просмотров
Подписаться 1 Средний 5 комментариев
Ответ пользователя vintage К ответам на вопрос (1)
@vintage
onChange={(e)=>{this.props.dispatch(updateAnswer())

Тут вы каждый раз создаёте новую функцию, что приводит к полному обновлению всего виртуального дома. Что лишний раз показывает бестолковость идеи виртуального дома, но это уже совсем другая история..
Ответ написан