Toolkit Selector 개념 정리

createSelector

- Selector 의 인자는 Redux State state 의 전체를 가리킨다!

  아래 코드를 보면, state 는 state 전체를 가리키는 것을 볼 수 있다!

import { createSelector } from '@reduxjs/toolkit'

import type { RootState } from '@/store'
import type { CreateReportParams } from '@/types/qna/report'

const selfState = (state: RootState) => state
const selectTarget = (
  _state: RootState,
  target: { id?: number; type: CreateReportParams['type'] }
) => target

export const getDefaultReportReasons = createSelector(
  [selfState, selectTarget],
  (state, target) => {
    const reportReasons = state.report. ....

    return reportReasons.filter((item) => item.categoryId === null)
  }
)

 

-  Reducer 는 Redux state 중 특정 상태에 접근한다!

const reportSlice = createSlice({
  extraReducers: (builder) => { ... },
  initialState: { ... },
  name: 'qna/report',
  reducers: {
    selectDetailReason: (state, action) => {
      state.selectedDetailReason = action.payload
    }
  }
})

 

 

 

useSelector 최적화하는 방법

https://blog.woolta.com/categories/1/posts/200

React 에서 useSelector 최적화 하는 3가지 방법.

prev, next. 비교 /  shallowEqual ...

 

 

useSelector  에 여러 개 인자 받기

https://redux.js.org/usage/deriving-data-selectors

Deriving Data with Selectors | Redux