230707 Thunk

📌 Redux 미들웨어

리덕스에서 dispatch하면 action이 리듀서로 전달이 되고 리듀서는 새로운 state를 반환한다. 이때 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣을 수 있다. 즉 리덕스 미들웨어는 서버와의 통신을 위해서 사용하는 것이라고 할 수 있다.

📌 Thunk

리덕스 Thunk란? 리덕스에서 많이 사용하고 있는 미들웨어 중 하나이다. thunk를 사용하면 dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.

📌 Thunk 사용하기

1) Redux ToolKit을 사용한 프로젝트 생성
2) Thunk 함수 만들기
3) extraReducer에 thunk 등록하기
4) dispatch(thunk 함수) 하기

폴더구조

configStore.js

import counter from "../modules/counterSlice";
import { configureStore } from "@reduxjs/toolkit";

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

export default store;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
 <Provider store={store}>
   <App />
 </Provider>
);

reportWebVitals();

counterSlice.js

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

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducer: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;

App.js

import "./App.css";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addNumber, minusNumber } from "./redux/modules/counterSlice";

function App() {
  const globalNumber = useSelector((state) => state.counter.number);
  const [number, setNumber] = useState(0);

  const dispatch = useDispatch();

  const onClickAddNumberHandler = () => {
    dispatch(addNumber(+number));
  };

  const onClickMinusNumberHandler = () => {
    dispatch(minusNumber(+number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input
        type="number"
        onChange={(event) => setNumber(event.target.value)}
      />
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickMinusNumberHandler}>빼기</button>
    </div>
  );
}

export default App;

2) Thunk 함수 만들기
3) extraReducer에 thunk 등록하기
4) dispatch(thunk 함수) 하기

counterSlice.js

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

// createAsyncThunk API 활용하기
// thunk를 쓰는 이유? 비동기 함수를 수행하기 위해서 즉, 서버에 요청을 하기 위해서
// thunk 함수는 앞에 "__"를 붙여준다
// thunk 함수는 두 개의 인풋(이름과 함수)이 들어간다
export const __addNumber = createAsyncThunk(
  "ADD_NUMBER_WAIT",
  // 이 함수에도 두 개의 인풋이 들어간다
  // payload와 thunk의 내장 기능을 가지고 있는 객체(thunkAPI)
  // (2) payload자리로 _addNumber에 넣어준 숫자가 들어옴
  (payload, thunkAPI) => {
    // 수행하고자 하는 동작 : 3초를 기다리게 할 예정
    setTimeout(() => {
      // (3) 3초 후에 action creator가 발동이 되면서 action 객체로 바뀌고 dispatch가 호출됨
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

export const __minusNumber = createAsyncThunk(
  "MINUS_NUMBER_WAIT",
  (payload, thunkAPI) => {
    setTimeout(() => {
      thunkAPI.dispatch(minusNumber(payload));
    }, 3000);
  }
);

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      // (4) action.payload에 입력한 숫자가 들어오고 state가 업데이트 됨!
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;

App.js

import "./App.css";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
// thunk 함수 import 하기
import { __addNumber } from "./redux/modules/counterSlice";
import { __minusNumber } from "./redux/modules/counterSlice";

function App() {
  const globalNumber = useSelector((state) => state.counter.number);
  const [number, setNumber] = useState(0);

  const dispatch = useDispatch();

  const onClickAddNumberHandler = () => {
    // dispatch(addNumber(+number));
    // __addNumber(thunk 함수)로 바꿔주기
    // (1) dispatch(__addNumber(+number))를 통해 입력한 number가 들어옴
    dispatch(__addNumber(+number));
  };

  const onClickMinusNumberHandler = () => {
    // dispatch(minusNumber(+number));
    dispatch(__minusNumber(+number));
    
// return문 생략

• 리덕스 미들웨어를 사용하면 액션이 리듀서로 전달되기 전에 '중간에' 어떤 작업을 더 할 수 있다.
• Thunk를 사용하면 객체가 아닌 함수를 dispatch 할 수 있다.
• 리덕스 툴킷에서 Thunk 함수를 생성할 때는 createAsyncThunk를 이용한다.
• createAsyncThunk()의 첫번째 인자로는 action value가 두번째 인자로는 함수가 들어간다.
• 두번째 인자로 들어가는 함수에서는 또 두 개의 인자를 사용할 수 있는데, 첫번째 인자는 컴포넌트에서 보내는 payload고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.

📌 extraReducers

1) thunk 함수 구현
2) 리듀서 로직 구현 : reducers -> extraReducers
- 서버 통신 : 100% 성공(x)
- 지금까지의 redux state(todos, counter)
- 앞으로의 state(isLoading, isError, data)
3) 기능 확인(network) - devTools
4) Store의 값을 조회 + 화면에 랜더링

todosSlice.js

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

const initialState = {
  todos: [],
  // 서버 통신을 위한 state를 추가
  isLoading: false,
  isError: false,
  error: null,
};

// (1-1) 서버에서 데이터 가져오기 (thunk 함수 구현)
export const __getTodos = createAsyncThunk(
  "getTodos",
  // 서버와 통신하는 함수이기 때문에 반드시 비동기 함수여야 함
  async (payload, thunkAPI) => {
    // 서버와의 통신은 항상 성공할 수 있는 것이 아니기 때문에 try catch문으로 오류 제어
    try {
      const response = await axios.get("http://localhost:4000/todos");
      console.log("response", response.data);

      // (1-2) 서버에서 가져온 데이터를 애플리케이션 내부의 리덕스 스토어로 가져오기
      // [fulfillWithValue] toolkit에서 제공하는 API로
      // Promise 객체가 resolve된 경우(즉, 네트워크 요청이 성공한 경우) dispatch 해주는 기능을 가진 API
      // dispatch 해주는 기능? 이 기능이 끝나고 나서 리듀서로 보내주는 기능
      // dispatch? 리듀서에게 액션과 페이로드를 전달해서 state 업데이트 시키는 과정
      // response 중에서 의미 있는 부분인 data만 넘겨줌
      return thunkAPI.fulfillWithValue(response.data);
    } catch (error) {
      console.log("error", error);
      // [rejectWithValue] toolkit에서 제공하는 API로
      //  Promise 객체가 reject된 경우(즉, 네트워크 요청이 실패한 경우) dispatch 해주는 기능을 가진 API
      return thunkAPI.rejectWithValue(error);
    }
  }
);

export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {},
  // (2) extraReducers로 리듀서 구현하기
  extraReducers: {
    // 통신이 진행중일 때
    [__getTodos.pending]: (state, action) => {
      // 서버 통신을 위한 state 업데이트
      state.isLoading = true;
      state.isError = false;
    },
    // 통신이 완료됐을 때
    [__getTodos.fulfilled]: (state, action) => {
      // 서버 통신을 위한 state 업데이트
      state.isLoading = false;
      state.isError = false;
      // 서버에서 받아온 데이터를 state 중 todos에 넣어줌
      state.todos = action.payload;
      // console.log("fulfilled: ", action);
      // {type: 'getTodos/fulfilled', payload: undefined, ...}
    },
    // 통신이 실패했을 때
    [__getTodos.rejected]: (state, action) => {
      // 서버 통신을 위한 state 업데이트
      state.isLoading = false;
      state.isError = true;
      // 서버 통신 중 오류가 났을 때 받아온 error 객체를 error state에 넣어줌
      state.error = action.payload;
    },
  },
});

export const {} = todosSlice.actions;
export default todosSlice.reducer;

App.js

import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { __getTodos } from "./redux/modules/todosSlice";

const App = () => {
  // (1-3) 마운트될 때 '__getTodos' 가져오기
  // thunk를 호출할 때도 dispatch 필요함
  const dispatch = useDispatch();
  useEffect(() => {
    // payload는 필요없음!
    dispatch(__getTodos());
  }, []);

  // (2-2) todos state에 있는 것들을 구조분해할당으로 가져오기
  // 로딩중이라면 바로 로딩중을 리턴, 로딩 완료 후 에러가 나면 바로 에러메세지를 리턴함으로써
  // 밑으로 내려갈 수 없도록 함 -> undefined나 null과 관련된 오류가 나지 않도록 조치
  const { isLoding, error, todos } = useSelector((state) => {
    return state.todos;
  });
  // 로딩중
  if (isLoding) {
    return <div>로딩중...</div>;
  }
  // 에러
  if (error) {
    return <div>{error.message}</div>;
  }
  // 정상
  return (
    <div>
      {todos.map((todo) => {
        return <div key={todo.id}>{todo.title}</div>;
      })}
    </div>
  );
};

export default App;