Добрый день, недавно начал изучать Redux и столкнулся с проблемой, что при любом изменении карточки, происходит ререндер абсолютно всех карточек.
Насколько я понимаю reselect при создании селектора поможет избежать лишней нагрузки на компонент и ререндера карточек не связанных с изменяемой. Но как этого добиться? В примерах из документации createSelector принимает в себя фильтр из стейта, а мне нужно его передать из пропсов
List
const List = ({ listId, title, adding }: ListProps) => {
const dispatch = useDispatch();
const card = useSelector((state: RootStateOrAny) => state.card);
return (
<Container key={listId} className="board">
<ListTitle title={title} id={listId} />
<Ul key={listId}>
{card
.filter((item) => {
console.log({ listId }, item);
return item.dataId === listId;
})
.map((item) => {
return <Card key={item.id} label={item.label} id={item.id} />;
})}
</Ul>
{adding ? (
<InputForm id={listId} />
) : (
<AddItem
className="board__additem"
onClick={() => dispatch(listActions.setAddCard(listId))}
>
Add
</AddItem>
)}
</Container>
);
};
Card
const Card = ({ id, label }: CardProps): JSX.Component => {
const [openModal, setOpenModal] = useState(false);
const dispatch = useDispatch();
const comment = useSelector((state: RootStateOrAny) =>
state.comment.filter((item) => item.recordId === id)
);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const text = e.target.value;
dispatch(cardActions.editCard(id, text));
};
return (
<>
<Li key={id} onDoubleClick={() => setOpenModal(true)}>
<Label value={label} onChange={onChange} />
<Image
onClick={() => dispatch(cardActions.deleteCard(id))}
className="item__button-delete"
src={TrashIcon}
alt="delete"
/>
{openModal && (
<Modal allowClose={true} content={<ModalCard />} setParentModalShow={setOpenModal} />
)}
</Li>
<CommentCount>Comments: {comment.length}</CommentCount>
</>
);
};
List state = [
{ id: 1, title: 'TODO', adding: false },
]
Card state = [
{ id: 1, dataId: 1, label: 'todo1', author: 'test', description: 'descr' },
{ id: 2, dataId: 4, label: 'todo2', author: 'test', description: 'no descr' },
]
dataId = List id
Могу ли я использовать createSelector для card.filter?