React Redux Tutorial Part 5 -- useSelector の使い方の復習

why

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

React Redux で connect の代替となる useSelector の説明があったが、チュートリアルとしてはなかったので、実際に動かしてみる

---

connect の時の流れ

https://dev.to/kaede_io/react-redux-tutorial-part-4-connect-api-woshi-tute-todo-apuriwozuo-ru-23f9

この記事の時は

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

と

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

これで取ってきている

---

useSelector での流れ

reducers -> redux/store -> Components/.../useSelector

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

---

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

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

CRA with TS で redux-useselector という名前で React アプリを作成

https://dev.to/kaede_io/react-redux-part-1-react-redux-nodao-ru-5o1

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

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 default で出して

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

useSelector (をラップしたもの) でグローバルステートを持ってきている。