🐱 #11 React.js - Redux middleware

🧩 Redux middleware 란?

Redux는 UI에서 Action이 생기고 이 Action을 dispatch가 받아 던져주고 Reducer가 받아 작업 지시를 return을 하면 state가 받아주는 원리이다.

이 Redux에게 단점이 있다. 단점이 무엇이냐면 비동기적 처리를 하지 못하는 것이다.

Redux는 동기적 처리를 하기 때문에 만약 A를 바꿔달라고 요청하면 코드가 순차적으로 실행되며 바로 바꿔준다. 그래서 API 요청같은 비동기적 작업이 불가능 하다는 단점이 있다.

이 단점을 처리 하기 위해 만들어진 것이 Redux middleware이다.

Redux middleware는 Redux 원리와 같지만 원래라면 dispatch가 던져주는 Action을 바로 Reducer가 받았지만 Redux middleware가 중간에 거쳐간다.
Redux middleware에서 함수를 만들 수 있어 여기서 비동기적 처리를 하게 되고 비동기처리가 끝나면 다시 dispatch로 던져줘 return해 state가 받아주는 원리이다.

middle ware는 어떤 컨셉에 이름이고, 중간에 가로챈다는 의미이다.

Redux middleware에는 두 가지 종류가 있다. redux-saga, redux-thunk가 있다.

여기서 적용할 것은 redux-thunk를 적용해 볼 것이다.

🧩 Redux middleware(redux-thunk) 설치

redux-thunk에 설명이 되어 있다.

먼저 작업하고자 하는 프로젝트에 Redux와 React-Redux를 설치한다.

npm install redux react-redux

yarn add redux react-redux

그 후 redux-thunk를 설치한다.

npm install redux-thunk

yarn add redux-thunk

이후 적용 방법은 redux 적용방법을 참고하면 된다.

위 방법을 적용했다면 store.js파일에 추가를 해줘야 하나다.

import {createStore, applyMiddleware} from "redux";
import thunk from 'redux-thunk' //추가
import rootReducer from "./reducers";

let store = createStore(rootReducer, applyMiddleware(thunk));


export default store;

이렇게 미들웨어를 사용준비가 완료된 것 이다.

🧩 Redux middleware 적용

API 요청을 예를 들어 적용한 것 이다.

redux 폴더 안에 actions 라는 폴더를 만들어 원하는 파일명으로 파일을 만들어 준다.

만든 파일에 함수를 만들어 준다.

기존에 있던 API 요청 함수를 미들웨어로 변경 해보자

• 기존 ProductAll.js

const [productList, setProductList] = useState('');
const getProducts = async () => {
      let searchQuery = query.get('q') || "";
      dlet url = `https://my-json-server.typicode.com/jjunseokk/hnm-site/products?q=${searchQuery}`;
      let response = await fetch(url);
      let data = await response.json();
      setProductList(data);
  };

• 변경 ProductAll.js

const productList = useSelector((state)=>state.product.productList); //reducer를 가져온 것.
const dispatch =useDispatch();
const getProducts = () => {
      let searchQuery = query.get('q') || "";
      dispatch(productAction.getProducts(searchQuery));
  };

• productAction.js

function getProducts(searchQuery) {
    return async (dispatch, getState) => {
        let url = `https://my-json-server.typicode.com/jjunseokk/hnm-site/products?q=${searchQuery}`;
        let response = await fetch(url);
        let data = await response.json();
        dispatch({type : "GET_PRODUCT_SUCCESS", payload : {data}});
    };
}

그리고 이제 dispatch가 보내눈 `reducer를 따라서 만들어 주면 된다.

let initialState = {
    productList: [],
    selectedItem: null,
}

function productReducer(state = initialState, action) {
    let { type, payload } = action;
    switch (type) {
        case "GET_PRODUCT_SUCCESS":
            return { ...state, productList: payload.data };
        default:
            return { ...state };
    }
}

export default productReducer;

🧩 Redux middleware 여러개 한번에 적용

• productReducer.js

let initialState = {
    productList: [],
    selectedItem: null,
}

function productReducer(state = initialState, action) {
    let { type, payload } = action;
    switch (type) {
        case "GET_PRODUCT_SUCCESS":
            return { ...state, productList: payload.data };
        case "GET_SINGLE_PRODUCT_SUCCESS":
            return { ...state, selectedItem: payload.data };
        default:
            return { ...state };

    }
}

export default productReducer;

• authenticateReducer.js

let initialState = {
    id : '',
    password : '',
    authenticate : false
}

function authenticateReducer (state=initialState, action){
    let {type, payload} =action;

    switch(type){
        case "LOGIN_SUCCESS" :
            return {...state, id : payload.id, password : payload.password, authenticate : true};

        default : 
            return {...state};
    };

}

export default authenticateReducer;

위 둘 reducer를 한번에 적용할 때 CombineReducer를 사용하여 여러개를 합칠 수 있다.
아래처럼 index.js파일을 만들어 아래와 같이 작성하면 된다.

• index.js

import { combineReducers } from "redux";
import authenticateReducer from "./authenticateReducer";
import productReducer from "./productReducer";



export default combineReducers({
    auth : authenticateReducer,
    product : productReducer
});