Redux & Reduxtoolkit

Javascript React

（参考URL）

next.js + typescript で Redux Toolkit を使う最小サンプル

Getting Started with Redux（公式）

Redux Toolkit TypeScript Quick Start

Next.js + typescript のインストール

npx create-next-app . --ts

reduxtoolkitとreact-reduxのインストール

yarn add @reduxjs/toolkit react-redux

では、シンプルでも動く構成で作っていきます。

やることは

  1. 型と初期値を定義
  2. slice（機能）の定義
  3. store（貯蔵データ）の定義

です。

構造を作る

シンプルに、ルートディレクトリにstoreディレクトリを作成し、その中にstore.tsxを作成します。

mkdir store

touch store.tsx

Storeの作成

■型と初期値の定義

ここからは

store > store.tsx

に書いていきます。

必要なライブラリをインストールします。

import { configureStore, createSlice } from "@reduxjs/toolkit";

初期値の型を決めていきます。

数値型と文字型の2種類のデータを扱う想定です。

//取りまとめの初期値の型
export type RootState = {
  counter: CounterState;
  address: AddressState;
}

type CounterState = {
  value: number;
}

type AddressState = {
  zipCode: string;
}

初期値を決めていきます。

const counterInitialState: CounterState = {
  value: 0,
}

const addressInitialState: AddressState = {
  zipCode: "textdata",
}

機能(slice)を決めていきます。

createSliceは React-toolkit の組み込み関数です。

//slice（機能）の作成
export const counterSlice = createSlice({
  name: "counter",
  initialState: counterInitialState,
  reducers: {
    increment(state){
      state.value++;
    }
  }
});

export const addressSlice = createSlice({
  name: "address",
  initialState: addressInitialState,
  reducers: {},
})

貯蔵庫（store）を決めていきます。

configureStore は React-toolkit の組み込み関数です。

//storeの作成
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
    address: addressSlice.reducer
  }
});