next.js+typescript에서 Redux Toolkit의 최소 샘플 사용

공식적인 샘플에는 상세한 사용법이 있지만
서류 가 아주 깨끗하게 분할되어 오랫동안 보지 않고는 도리어 이해하기 어렵다
ReduxToolkit을 사용한 샘플을 필요한 부분의 최소 설정에 요약합니다.

주의

프로젝트가 만들어진 후 서버가 시작된 상태에서 계속 진행하면
Provider 태그를 추가한 후useDispatch()를 호출할 때please ensure the component is wrapped in a <Provider>의 오류입니다. 하지만 서버를 재부팅하면 제대로 작동해야 합니다.

next.js 프로젝트 만들기

npx create-next-app redux_toolkit_sample --ts

pages/index.tsx를 간단한 디스플레이로 설정하기

pages/index.tsx는 계수와 단추만 표시합니다.
pages/index.tsx

import { NextPage } from "next"

const Home: NextPage = () => {
  return (
    <div>
      <p>count</p>
      <button>click</button>
    </div>
  );
};

export default Home;

pages/_app.tsx 편집

_app.tsx에 필요한 처리를 추가합니다.
공식 견본은 따로 서류를 제작하지만 여기서는 서류 수를 줄이려고 하기 때문에app.tsx에 쓸 수 있는 것은 여기까지만 쓰세요.
(이 섹션의 마지막 코드가 있습니다.)
※ 알기 쉬운 것을 중요시하기 때문에 하나의 문서로 묶었기 때문에 업무 중에 제작할 때는 공식 샘플에 따라 피처스 단위로 슬라이스를 정리하는 것이 좋습니다.

레드ux로 관리된state로 제작

카운트 수를 관리하는 CounterState 유형을 만듭니다.
또한 초기 값을 설정하는 변수를 정의합니다.
pages/_app.tsx

// typeの定義
export type CounterState = {
  value: number;
};
// 初期値の定義
const initialState: CounterState = { value: 0 };

slice 만들기

계수를 늘리는increament 동작을 만듭니다.
pages/_app.tsx

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

export const counterSlice = createSlice({
  // 名前
  name: "counter",
  // 初期値
  initialState,
  // reducer
  reducers: {
    increment(state) {
      state.value++;
    },
  },
});

스토어 제작

Reducter 제작 store 지정
pages/_app.tsx

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

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

Redux를 사용하기 때문에 Provider로 둘러싸기

서브어셈블리는 Provider로 둘러싸여 store를 미리 지정합니다.
pages/_app.tsx

import { Provider } from "react-redux";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

여기까지 정리된 코드입니다.

pages/_app.tsx

import React from "react";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { configureStore, createSlice } from "@reduxjs/toolkit";

export type CounterState = {
  value: number;
};

const initialState: CounterState = { value: 0 };

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state) {
      state.value++;
    },
  },
});

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}
export default MyApp;

pages/index.tsx 편집

실제 표시된 페이지를 만듭니다.

useDispath

store에서 시작 동작의 디스패치 함수를 얻기 위해useDispatch에서 미리 가져옵니다.
pages/index.tsx

import { useDispatch } from "react-redux";

const dispatch = useDispatch();

useSelector

useSelector 연결을 사용하여store에서 state를 가져옵니다.
현재 store에는 CounterState만 있습니다.store.getState().counterCounterState
고리로 찾다.
pages/index.tsx

import { useSelector } from "react-redux";

const selector = useSelector((state: CounterState) => state);

디스플레이 카운터

selector에서 CounterState를 참조할 수 있기 때문에 카운터의 값을 얻어 표시합니다.
pages/index.tsx

  return (
    <div>
      <p>{selector.value}</p>
      <button>Click</button>
    </div>
  );

increament 동작 가져오기

슬라이스 액션스에서만 필요한 동작increament를 얻을 수 있습니다.
pages/index.tsx

const { increment } = counterSlice.actions;

단추를 누르면increament 동작을 실행합니다

pages/index.tsx

<button
  onClick={() => {
    dispatch(increment());
  }}
>
  Click
</button>

여기까지 정리된 코드입니다.

pages/index.tsx

import { useDispatch, useSelector } from "react-redux";
import { counterSlice, CounterState, store } from "./_app";
import { NextPage } from "next";

const Home: NextPage = () => {
  const dispatch = useDispatch();
  const selector = useSelector((state: CounterState) => state);
  const { increment } = counterSlice.actions;

  return (
    <div>
      <p>{selector.value}</p>
      <button
        onClick={() => {
          dispatch(increment());
        }}
      >
        Click
      </button>
    </div>
  );
};

export default Home;

store에 여러 state가 있는 경우

여러 state를 요약하는 RootState 만들기
store에 각state를 처리하는 Reducter를 등록합니다.
useSelector에서 얻을 state를 선택하면 됩니다.

export type RootState = {
  counter: CounterState;
  address: AddressState;
};

const counterInitialState: CounterState = {
  value: 0,
};

const addressInitialState: AddressState = {
  zipCode: "000-0000",
};

export const counterSlice = createSlice({
  name: "counter",
  initialState: counterInitialState,
  reducers: {
    increment(state) {
      state.value++;
    },
  },
});

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

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

useSelector에서 사용 시

  const counterSelector = useSelector((state: RootState) => state.counter);
  const addressSelector = useSelector((state: RootState) => state.address);