react redux-toolkit引数

code:ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type CounterState = { count: number };

const initialState: CounterState = { count: 0 };

export const counterSlice = createSlice({

name: 'counter',

initialState,

reducers: {

added: (state, action: PayloadAction<number>) => ({

...state,

// 下記で説明

count: state.count + action.payload,

}),

decremented: (state) => ({ ...state, count: state.count - 1 }),

incremented: (state) => ({ ...state, count: state.count + 1 }),

},

});

code:解説.ts

📝 この行の意味を分解して

count: state.count + action.payload,

各部分の説明

count:

- 新しいstateオブジェクトのcountプロパティ

state.count

- 現在のcountの値（例：今3だったら3）

action.payload

- Actionに含まれる追加データ（例：10を足したいなら10）

+

- 足し算

🎯 具体例で理解する

// 現在の状態

state = { count: 3 }

// ボタンクリックで +10 したい

dispatch(added(10))

// ↓

// action = { type: 'counter/added', payload: 10 }

// Reducerの処理

count: state.count + action.payload

count: 3 + 10

count: 13

// 結果

新しいstate = { count: 13 }

📦 PayloadActionの型定義

// 10行目でPayloadAction<number>と定義

added: (state, action: PayloadAction<number>) => ({

// ^^^^^^^^^^^^^^^^^^^^

// payloadはnumber型

これにより：

- action.payloadは必ず数値

- added(10) → payload は 10

- added(5) → payload は 5

🔄 全体の流れ

1. ユーザーが「+10」ボタンをクリック

↓

2. dispatch(added(10)) が実行

↓

3. action = {

type: 'counter/added',

payload: 10 // ← ここに10が入る

}

↓

4. Reducerで計算

count: state.count + action.payload

count: 0 + 10 = 10

↓

5. 画面に「10」と表示

💡 なぜpayloadを使うのか

// ❌ payloadなしだと...

increment: (state) => ({ count: state.count + 1 }) // +1固定

increment2: (state) => ({ count: state.count + 2 }) // +2用に別途必要

increment10: (state) => ({ count: state.count + 10 }) // +10用も...

// ✅ payloadありなら

added: (state, action) => ({

count: state.count + action.payload

})

// added(1), added(2), added(10) 全部これ1つでOK！

payloadは「可変部分」を渡すための入れ物です。