React Redux Tutorial Part 5 -- useSelector의 사용 방법

왜

https://react-redux.js.org/api/hooks#useselector-examples

React Redux で connect の代替となる useSelector の説明があったが, 츄트리알로 てはなかったので、実際に動かしてみる

connect の時の流れ

この記事の時は

redux/actions -> reducers -> redux/store -> src/index/Provider

와

redux/store -> redux/selectors.js -> Components/.../connect(mapToStateProps)

これで取ってきている

useSelector로 の流れ

감속기 -> redux/store -> Components/.../useSelector

これで取って来れると予測する.

CRA with TS し て store と reducers を作成する

npx create-react-app redux-useselector --template typescript

CRA with TS で redux-useselector 그렇담 앞서 React 실행

これの流れの通りに再びやってみた.

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
// exporting increment and decrement

export default counterSlice.reducer
// exporting counter state

改めてみると、slice ファイルデグローバルステート定義して
기본 내보내기 で出して

export function Counter() {
  const count = useAppSelector((state) => state.counter.value)

useSelector (をラップしたもの) でgro-barlsteint를 持ってきている.