Next.jsにReduxを導入するステップ [Next15 React19]

npx create-next-app@latest

√ What is your project named? ... my-app-name
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for next dev? ... No
√ Would you like to customize the import alias (@/* by default)? ... No

cd my-app-name
code .

npm install react-redux @reduxjs/toolkit --force

...略
npm warn node_modules/react
npm warn   peer react@"^18.0" from react-redux@9.1.2
npm warn   node_modules/react-redux
npm warn     react-redux@"*" from the root project
npm warn     1 more (@reduxjs/toolkit)

added 8 packages, and audited 381 packages in 6s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm install react@18 react-dom@18 @types/react@18 @types/react-dom@18

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './Counter/slice'

export const makeStore = () => {
  return configureStore({
    reducer: {
      counter: counterReducer
    }
  })
}

// Infer the type of makeStore
export type AppStore = ReturnType<typeof makeStore>
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

import { useDispatch, useSelector, useStore } from 'react-redux'
import type { AppDispatch, AppStore, RootState } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()
export const useAppStore = useStore.withTypes<AppStore>()

'use client'
import { useRef } from 'react'
import { Provider } from 'react-redux'
import { makeStore, AppStore } from './store'

export default function StoreProvider({
  children
}: {
  children: React.ReactNode
}) {
  const storeRef = useRef<AppStore | null>(null)
  if (!storeRef.current) {
    // Create the store instance the first time this renders
    storeRef.current = makeStore()
  }

  return <Provider store={storeRef.current}>{children}</Provider>
}

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

// stateの型定義
interface CounterState {
  value: number;
}
// strateの初期値
const initialState: CounterState = {
  value: 5
}
// state管理の本体
const counterSlice = createSlice({
  name: "counter",  // 名称 ※分かりやすければ何でもいい
  initialState,     // 初期値の定義 initalState: 5とか記載してもいい
  reducers: {       // stateを更新する処理群
    increment(state) {
	    // stateの加算を行う
      state.value++;
    },
    decrement(state) {
	    // stateの減算を行う
      state.value--;
    },
    amountAdd(state, action: PayloadAction<number>){
	    // 第二引数にactionとして数値を受け取り、数値分加算する。.payloadとして値を取得する
      state.value += action.payload;
    },
  },
})
// reducersをcounterSlice.actionsからexport
export const { increment, decrement, amountAdd } = counterSlice.actions;
// export defaultとして、counterSlice.reducerを指定
export default counterSlice.reducer;

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './Counter/slice'
//　新たな状態変数をimport
import newStateReducer from './NewState/slice'

export const makeStore = () => {
  return configureStore({
    reducer: {  
      counter: counterReducer
      // reducerに追記
      newState: newStateReducer
    }
  })
}

// Infer the type of makeStore
export type AppStore = ReturnType<typeof makeStore>
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
// StoreProviderをimport
import StoreProvider from "@/stores/StoreProvider";

// 以下は初期フォントとかなどで必要に応じて削除
const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
	{/* StorePrvederタグで全体を閉じる */}
    <StoreProvider>
      <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {children}
        </body>
      </html>
    </StoreProvider>
  );
}

// 状態変数を用いるコンポーネントはクライアントコンポーネント
'use client'
// react-reduxの必要な関数を呼び出し
import { useDispatch, useSelector } from "react-redux";
// 状態変数counterに定義したreducersをimport
import { amountAdd, decrement, increment } from "@/stores/Counter/slice";
// store.tsに作成したRootState（getState）をimport
import { RootState } from "@/stores/store";

export default function Home() {
	// 状態変数はstate.{変数名}.valueで取得
  const counter = useSelector((state: RootState) => state.counter.value)
  const dispatch = useDispatch()
  return (
    <>
      <div>
	      {/* 各種処理をクリックで実行する */}
	      <span>{counter}</span>
        <button aria-label="Increment value" onClick={() => dispatch(increment())}>
          Increment
        </button>
        {/* action.payloadとして第二引数が必要なものは値を入力 */}
        <button aria-label="Amount add value" onClick={() => dispatch(amountAdd(2))}>
          amountAdd
        </button>
        <button aria-label="Decrement value" onClick={() => dispatch(decrement())}>
          Decrement
        </button>
      </div>
    </>
  );
}