@dtmaik

Как использовать Reselect c параметрами?

Добрый день, недавно начал изучать 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?
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы