はじめに
- Redux Toolkitを調べてみる。
インストール
- 下記のようにインストールすると、Redux Toolkitをインストールすることができる。
npx create-react-app my-app --template redux-typescript
Redux DevToolsインストール
- Reduxを開発する際はRedux DevToolsをインストールすると実行されたアクションの履歴やstoreの状態を確認できるので開発時には便利なのでインストールした方が良い。
Redux Toolkitで覚えておく必要がある関数
useSelector
- セレクター機能を使用して、Reduxストアの状態からデータを抽出できます。
import { shallowEqual, useSelector } from 'react-redux' // later const selectedData = useSelector(selectorReturningObject, shallowEqual)
useDispatch
- Reduxストアからディスパッチ関数への参照を返します。必要に応じてアクションをディスパッチするために使用できます。
import React from 'react' import { useDispatch } from 'react-redux' export const CounterComponent = ({ value }) => { const dispatch = useDispatch() return ( <div> <span>{value}</span> <button onClick={() => dispatch({ type: 'increment-counter' })}> Increment counter </button> </div> ) }
configureStore
- 標準のReduxcreateStore関数をわかりやすく抽象化したもので、ストアのセットアップに適切なデフォルトを追加して、開発エクスペリエンスを向上させます。
https://redux-toolkit.js.org/api/configureStore
createSlice
- 初期状態、reducers関数でいっぱいのオブジェクト、「スライス名」を受け入れ、レデューサーと状態に対応するアクションクリエーターとアクションタイプを自動的に生成する関数。
import { createSlice, PayloadAction } from '@reduxjs/toolkit' interface CounterState { value: number } const initialState = { value: 0 } as CounterState const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment(state) { state.value++ }, decrement(state) { state.value-- }, incrementByAmount(state, action: PayloadAction<number>) { state.value += action.payload }, }, }) export const { increment, decrement, incrementByAmount } = counterSlice.actions export default counterSlice.reducer