[React + Next.js] Redux toolkit 사용하기

난 Redux를 처음 쓴다. 

 

근데 시작부터 건방지게 Redux toolkit 을 사용하겠다.

 

그래도 되냐 한다면 당연히 오케이다. 

 

왜냐하면 toolkit이 더 편해보이기 때문이다.

 

Redux 란

리덕스란 상태 관리 라이브러리이다.

Context API를 써봐서 대충 어떤 건진 알겠는데, 아 ContextAPI랑 차이점 같은 것도 나중에 공부해야겠다.

 

구조

1. Store에 데이터를 저장한다. ( initial data )

2. Store에 있는 데이터를 읽어서 UI에 보여준다.

3. UI 이벤트에서 dispatch가 이뤄진다. 

4. dispatch는 action을 전달한다.

5. reducer는 action을 받아서 store에 저장한다 !

순서로 흘러간다. ( 내 경험 상 그런듯함 )

 

Redux의 규칙

이런 redux에는 나름의 규칙이 있다. ( 공식 홈페이지 official )

1. 진실은 하나의 근원으로부터​

 - 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장됩니다.

->> 내 해석 : Store에 전부 저장한다.

 

2. 상태는 읽기 전용이다​

- 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 Action 객체를 전달하는 방법뿐입니다.

->> 내 해석 : Store에 저장된 데이터는 dispatch로 action을 전달해야만 바꿀 수 있다.

 

3. 변화는 순수 함수로 작성되어야한다​

- 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 Reducer를 작성해야합니다.

->> 내 해석 : Side Effect가 없어야 함. 나는 그냥 dispatch로 받아온 값만 변경. 혹은 true/false 변경하는 식만 넣어씀.

 

redux toolkit 코드

- 부모 컴포넌트 및 리듀서. 원래는 리듀서를 분리해서 저장하고 Import하지만 테스트로 그냥 했다.

 _app.tsx

import type { AppProps } from "next/app";
import { PayloadAction } from "@reduxjs/toolkit";

import { Provider } from "react-redux";
import { createSlice, configureStore } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    up: (state, action: PayloadAction<number>) => {
      state.value = state.value + action.payload;
    },
    down: (state, action: PayloadAction<number>) => {
      state.value = state.value - action.payload;
    },
  },
});

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

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

export default MyApp;

-> Provider로 전역 범위를 묶어주기만 하고, redux toolkit에서 불러온 createSlice로 초기화, 리듀서 등을 만든다.

-> configureStore로 만든 slice를 name 단위로 불러와서 Store에 저장한다.

 

MainTemplates.tsx

import React from "react";
import MyPage from "./MyPage";
import { counterSlice } from "../pages/_app";
import { useDispatch } from "react-redux";

const MainTemplates = () => {
  const dispatch = useDispatch();
  return (
    <div className="flex flex-row">
      <div className="flex">
        <button
          className="cursor-pointer bg-blue-100 h-[30rem] w-[30rem]"
          onClick={() => dispatch(counterSlice.actions.up(2))}
        >
          button
        </button>
        <MyPage />
      </div>
    </div>
  );
};

export default MainTemplates;

-> dispatch와 금방 만든 counterSlice를 불러와서 onClick이벤트에 Action으로 값을 보내준다.

 

MyPage.tsx

import React from "react";
import { useSelector } from "react-redux";

const MyPage = () => {
  const count = useSelector((state: any) => state.counter.value);
  return (
    <div className="cursor-pointer bg-red-100 h-[30rem] w-[30rem] flex items-center justify-center">
      {count}
    </div>
  );
};

export default MyPage;

-> useSelector로 counter의 값을 가져온다 !

 

아직 모자라니 더 공부해서 추가하도록 하겠다 !

hello redux ~

 

참고 - 

https://www.freecodecamp.org/news/what-is-redux-store-actions-reducers-explained/