Как в REACT-REDUX сделать, чтобы перерендеривался только один элемент?

Question

[toly19]

Есть родительский элемент App. Он через connect подписан на изменение всего стора.
Есть элемент Todo. Он также подписан на изменение всего стора.
Элементов Todo может быть несколько.
Когда один из Todo выстреливает событие, то это приводит к перерендеру App и вложенных Todo (всех).
Как сделать, чтобы при диспатче события обновлялся только тот Todo, который его отправил?

Весь код на codepen
P.S. смотри консоль

Answer 1

[Никита Гущин]

Гляньте вот этот ответ React-Redux. Какой путь правильнее: вызов connect ...

Если кратко:

• Избавьтесь от коннектов, которые слушают большие куски стейта
  
• Используйте reselect, для вычислений стейта (например, когда собираете элемент из разных редьюсеров)
  
• Используйте connect элементах, которым нужны данные. Их может быть много. Список из 1000 connected-elements работает быстрее, чем список из 1000 элементов с 1м connected-element. Потому что даже PureComponent имеет свой оверхед и если дочерний компонент не обновился - это не значит, что diff алгоритм реакта не будет обрабатывать изменения в родительском компоненте
  

Comments

[toly19]

Сделал как по ссылке ( вроде как).
Вот что получилось

import React from "react";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";

let generalReducer = (store = { entries: [], ids: [] }, action) => {
	switch (action.type) {
		case "ADD": {
			let l = { entries: [...store.entries], ids: [...store.ids] }
			l.entries.push({ value: action.value });
			l.ids.push(l.ids.length);
			return l;
		};
		case "UPDATE": {
			let l = { entries: [...store.entries], ids: store.ids }
			l.entries[action.id].value = "123467878778";
			return l;
		};
		default: return store;
	}
}
let generalStore = createStore(generalReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
class Element extends React.Component {
	constructor(props) {
		super(props);
		this.elementInStore = this.props.data;
	}
	render() {
		console.log("RENDER ELEMENT:", this.props.idKey);
		return <div>
			<button onClick={() => { this.props.update(this.props.idKey) }}>{this.elementInStore.value}</button>
		</div>;
	}
}
let ElementRedux = connect(
	(store, props) => {
		console.log("Element changed",store.entries[props.idKey]);
		return { data: store.entries[props.idKey] };
	},
	dispatch => ({
		update: id => dispatch({ type: "UPDATE", id })
	})
)(Element);

class App extends React.Component {
	render() {
		console.log("render APP")
		return <div> {this.props.items.map(itemId => <ElementRedux key={itemId} idKey={itemId} />)} </div>;
	}
}
let AppRedux = connect(
	store => ({ items: store.ids })
)(App);
generalStore.dispatch({ type: "ADD", value: "1" });
generalStore.dispatch({ type: "ADD", value: "2" });

export default <Provider store={generalStore}><AppRedux /></Provider>;

Не работает- при изменении элемента в сторе, он не перерендеривается.
Для каждого элемента подключается кусок стора
return { data: store.entries[props.idKey] };
Если же к каждому элементу подключать все остальные элементы:
return { data: store.entries };
То будет работать, но тогда при изменении одного элемента, перерендериваются все, а нужно, чтобы только один.

[Никита Гущин]

toly19: у вас редьюсер реализован неверно. Данные в redux-store иммутабельны. Это означает, что мы не можем их менять - только создавать заново:

case "ADD": {
      return {
         return { 
           ...store, 
           entries: [ ...store.entries, { value: action.value } ],
           ids: [ ...store.ids, store.ids.length ],
         }
      };
    };
case "UPDATE": {
     // заменяем только элемент с id === action.id, остальные оставляем как есть
     const nextEntries = store.entries.map((el, id) => id === action.id ? { ...el, value: action.value } : el)
      return {
         return { ...store, entries: nextEntries }
      };
    };

Answer 2

[Сергей Мельников]

Когда вызывается метод render это не значит, что приложение перерендерится. Метод render возвращает Virtual DOM. Механизм ReactJS берет возвращаемый объект Virtual DOM, сравнивает с предыдущим и точечно вносит изменения, если они есть.