Как правильно использовать функцию createSelector (библиотека reselect) с хуком useSelector в приложении React?

Question

[rgdzv]

Делаю проект на React. Код компонента App:

const App = () => {

  //const { tickets, isFetching, error } = useSelector(({ tickets }) => tickets)  // <- эта строка хорошо отрабатывает

  const { isFetching } = useSelector(({ tickets }) => tickets)
  const tickets = useSelector(sorterSelector)                         //  <- возвращает undefined

  const dispatch = useDispatch()

  const renderedTickets = tickets.map((ticket) => {            //  <- проблема - TypeError: Cannot read property 'map' of undefined
    const src = `http://pics.avs.io/99/36/${ticket.carrier}.png`
    return (
      <Ticket
        key={ticket.price + ticket.segments[0].duration}
        ticket={ticket}
        price={ticket.price}
        src={src}
        segment={ticket.segments}
      />
    )
  }).slice(0,5)

  useEffect(() => {
    dispatch(fetchData())
  }, [])

  return (
    <div className="container">
      <Header />
      <div className="content">
        <Filter />
        <div className="content__item">
          <div className="content__item__sorting">
            <Sorter/>
          </div>
          {isFetching 
            ? 
              <img src={preloader} alt="preloader"/>
            : 
              <div className="content__item__tickets">
                {renderedTickets}
              </div>
          }
        </div>
      </div>
    </div>
  )
}

Код для селектора:

const allTickets = state => state.tickets
const selected = state => state.sorter.selected

export const sorterSelector = createSelector(
  [allTickets, selected],
  (tickets, selec) => {                                         // <- tickets - пустой массив
    if (tickets.isFetching || tickets.error) {
      return []
    }
    if (selec === "Самый дешевый") {
      [...tickets.tickets].sort((a, b) => {
        return a.price - b.price
      })
    } else {
      [...tickets.tickets].sort((a, b) => {
        return (a.segments[0].duration + a.segments[1].duration) - (b.segments[0].duration + b.segments[1].duration)
      })
    }
  }
)

Первая закомментированная строка в компоненте App (где я деструктурирую объект) работает хорошо: я получаю билеты с сервера и отображаю их в компоненте. Но мне необходимо добавить сайд-эффекты в массив билетов (сортировка, фильтрация), поэтому я решил использовать селектор.

Однако, при использовании такой записиconst tickets = useSelector(sorterSelector), селектор возвращает undefined (ошибка TypeError: Cannot read property 'map' of undefined). При данной записи и логике, которую я описал в sorterSelector, я даже не вижу, что функция fetchData в useEffect компонента App запускается.

Как решить эту проблему?
Использование записи

const tickets = useSelector(state => sorterSelector(state))

также не помогает. Функция fetchData не запускается, селектор остается undefined.

Comments

[tervizator]

Можете код выложить на codepen?

[rgdzv]

tervizator, Вам только эту часть (в вопросе) или полностью? Там просто много

[tervizator]

Главное чтобы запустилось, то что вы выложили)

[rgdzv]

tervizator, я боюсь, что мне необходимо будет выкладывать целый проект (вместе с reducers и т.д.), это очень много, не могли бы вы конкретно указать, что вам не понятно, подскажу)

[tervizator]

rgdzv, ну я бы хотел по больше посмотреть на сам sorterSelector, а именно немного подебажить в нем т.к. ваша ошибка больше похоже, что вы хотите применить метод map, на не массив, значит что внутри самого селекта что-то не так с выводом

[rgdzv]

tervizator,

const allTickets = state => state.tickets         //  <- Выводит следующий объект {isFetching: false, error: null, tickets: []}
const selected = state => state.sorter.selected

export const sorterSelector = createSelector(
  [allTickets, selected],                                     // <- allTickets пустой массив
  (tickets, selec) => {                                         // <- tickets - пустой массив
   debugger                                                      // <- debuger
    if (tickets.isFetching || tickets.error) {
      return []
    }
    if (selec === "Самый дешевый") {
      [...tickets.tickets].sort((a, b) => {
        return a.price - b.price
      })
    } else {
      [...tickets.tickets].sort((a, b) => {
        return (a.segments[0].duration + a.segments[1].duration) - (b.segments[0].duration + b.segments[1].duration)
      })
    }
  }
)

Почему-то не запускается функция fetchData при таком подходе, странно)

[rgdzv]

tervizator, сделал песочницу, https://codesandbox.io/s/project-lbfpx?file=/src/App.js

[tervizator]

rgdzv,

Как можно заметить ни чего не выводиться, потому что массив приходит в итоге пустым, а проблемой в селекторе была в том, что он ни чего не возвращал т.е. массив был преобразован, но не было return

[rgdzv]

tervizator, спасибо, простая ошибка, как я мог не заметить)