I am using reselect lib in my React project. Here is a code:

```
const App = () => {

  // const { tickets, isFetching, error } = useSelector(({ tickets }) => tickets)   // <- this works good

  const { sorterTabs, selected } = useSelector(({ sorter }) => sorter)
  const { isFetching } = useSelector(({ tickets }) => tickets)
  const dispatch = useDispatch()
  const tickets = useSelector(sorterSelector)   // <- this doesn't work good     

  const handleSorterClick = ({ target }) => {
    dispatch(getSelectedSorter(target.getAttribute('name')))
  }

  const renderedTickets = tickets.map((ticket) => {   // <- problem: I have undefined here because selector returns 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
              sorterTabs={sorterTabs}
              selected={selected}
              handleSorterClick={handleSorterClick}
            />
          </div>
          {isFetching 
            ? 
              <img src={preloader} alt="preloader" />
            : 
              <div className="content__item__tickets">
                {renderedTickets}
              </div>
          }
        </div>
      </div>
    </div>
  )
}

```

Code for selector:

```
const allTickets = state => state.tickets.tickets  // <- this gets undefined 
const selected = state => state.sorter.selected

export const sorterSelector = createSelector(
  [allTickets, selected],
  (tickets, selec) => {
    if (selec === "Самый дешевый") {
      tickets.sort((a, b) => {
        return a.price - b.price
      })
    } else {
      tickets.sort((a, b) => {
        return (a.segments[0].duration + a.segments[1].duration) - (b.segments[0].duration + b.segments[1].duration)
      })
    }
  }
)

```

As I mentioned in the App's code, first commented line (where I destructure the object) works good: I'm fetching tickets from the server, put them in redux state, get them in App's component and render them.

But if I create selector by `createSelector` function from 'reselect' lib and put it in `useSelector` function like I mentioned in the code `const tickets = useSelector(sorterSelector)`, I got mistake: `TypeError: Cannot read property 'map' of undefined`. Tickets are not returned from the state, but state is empty. That means that `fetchData` function didn't work.

What am I doing wrong here? How to use it properly?

UPD: this doesn't work too `const tickets = useSelector((state) => sorterSelector(state))`
['https://Stackoverflow.com/questions/65788251', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/13115642/']
This is a nice example of when to actually use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in favor of regular functions! Because regular functions—like in your code—establish their own `this` scope you no longer have access to the `this` scope you are interested in, namely the scope of your surroungding class.

Many D3 methods are called with `this` set to the current DOM element:

> 
> with *this* as the current DOM element (*nodes*[*i*])
> 
> 
> 

To be able to use your class instance's methods by referring to them using `this` you can just use an arrow function which does not come with its own scope but captures the scope of its surrounding context, i.e. your class/instance. Your methods should therefore look like this:

```
.attr('x', d => this.x(d.dayNumber))

```
The `this` has a type of SVGRectElement because it is inside a regular anonymous function. In D3, methods for manipulating nodes replace the `this` context with the own DOM Element that is being manipulated, in your case a `<rect>`. The `<rect>` nodes don't have x or y methods, hence the type error.

Replacing the anonymous functions with arrow functions [preserves the `this` from the outside](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):

```js
.attr('x', (d: HeatmapData) => {
          return this.x(d.dayNumber)
 })
 .attr('y', (d: HeatmapData) => {
          return this.y(d.timeOfDay)
 })

```

Now, the `this` inside the function is the same `this` from the outside, which in your case is the class that contain svg, x, xAxis, y and yAxis.