Redux Toolkitを調べる

はじめに

• Redux Toolkitを調べてみる。

インストール

• 下記のようにインストールすると、Redux Toolkitをインストールすることができる。

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

Redux DevToolsインストール

• Reduxを開発する際はRedux DevToolsをインストールすると実行されたアクションの履歴やstoreの状態を確認できるので開発時には便利なのでインストールした方が良い。

chrome.google.com

Redux Toolkitで覚えておく必要がある関数

useSelector

• セレクター機能を使用して、Reduxストアの状態からデータを抽出できます。

import { shallowEqual, useSelector } from 'react-redux'

// later
const selectedData = useSelector(selectorReturningObject, shallowEqual)

react-redux.js.org

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>
  )
}

react-redux.js.org

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

redux-toolkit.js.org