[Today I Learned] 12월 3주차 day5

redux toolkit

yarn add react-redux @reduxjs/toolkit          // redux 툴킷 설치

index.js 파일

// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

        //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

createslice라는 api 사용

// src/redux/modules/counterSlice.js

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

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",  // 모듈 이름
  initialState,     // 초기상태값
  reducers: {         // 이모듈의 reducer 로직
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

configStore.js

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit";
/**
 * import 해온 것은 slice.reducer 입니다.
 */
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

/**
 * 모듈(Slice)이 여러개인 경우
 * 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 합니다.
 *
 * 아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
 * 이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것 입니다.
 */
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

redux devtools (구글 확장프로그램)

현재 프로젝트의 state 상태나, 액션 발생시 알 수 있고 , 액션을 통해서 state가 어떻게 변경 되는지를 알수 있는 툴이다.

redux-toolkit thunk 기능

리덕스 미들웨어 기능이다. 액션이 리듀서로 전달 되기전 중간에 비동기작업을 작업하게 해준다.

모듈 추가방법

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

export const __addNumber = createAsyncThunk(
	// 첫번째 인자 : action value
  "addNumber", 
	// 두번째 인자 : 콜백함수 
  (payload, thunkAPI) => {
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

[참고자료]

생활코딩 redux toolkit 비동기작업강좌
redux-toolkit 공식문서