D
D
dtmaik2021-06-23 15:49:46
React
dtmaik, 2021-06-23 15:49:46

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>
  );
};


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

Can I use createSelector for card.filter?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question