21일차(thunk, custom-hocks)

thunk

1. 리덕스 구조에서 비동기를 다루는 미들웨어
 => 미들웨어: dispatch -> state 반환 전에 하고 싶은 작업을 넣을 수 있도록 해주는 것
	Ex) count에서 더하기 버튼을 눌렀을 때 3초 기다리고 +1 구현

2. 사용이유: 서버와의 통신을 위해 사용

3. 액션 객체가 아닌 함수를 디스패치 할 수 있게 해줌

4. 액션이 리듀서로 전달되기 전 중간에 어떤 작업을 더할 수 있음

 

사용방법

// redux / modules / counterSlice.js

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

// 2개의 인풋(이름, 함수)
// 여기서 만든 함수를 component의 dispatch(addNumber) 대신 __addNumber를 넣어주면 됨
export const __addNumber = createAsyncThunk(
  "ADD_NUMBER_WAIT",
  // payload는 component에서 dispatch로 받아온 데이터
  (payload, thunkAPI) => {
    // 수행하고 싶은 동작 넣기: 3초 기다려
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

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

// Initial State
const initialState = {
  number: 0,
};

// createSlice를 활용
// name, initialState, reducers는 필수로 작성해줘야 함
const counterSlice = createSlice({
  name: "counter",
  initialState: initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

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

 

---

custom-hocks

// src / hocks / useInput.js
// input 태그 이벤트를 관리하는 hock

import { useState } from "react";

const useInput = () => {
  // state
  const [value, setValue] = useState("");

  // handler
  const handler = (e) => {
    setValue(e.target.value);
  };

  return [value, handler];
};

export default useInput;

// 위처럼 hock을 만든 뒤 
// app.jsx에서 아래와 같이 받으면 됨

const [name, onChangeNameHandler] = useInput()