Answer the question
In order to leave comments, you need to log in
How to use Reselect with options?
Good afternoon, I recently started learning Redux and ran into a problem that with any change in the card, absolutely all cards are rerendered.
As far as I understand, reselect when creating a selector will help to avoid unnecessary load on the component and re-rendering of cards not related to the variable. But how can this be achieved? In the examples from the documentation, createSelector takes a filter from the state, and I need to pass it from the
List props
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>
);
};
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>
</>
);
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question