230315 - React - Redux middleware

오늘 내가 배운 것

1. Reducer action.type 관리하기

2. Redux middleware

3. Reducer action 만들기

 

 

1. Reducer action.type 관리하기

action의 type을 작성할 때, string으로 되어있기 때문에, 오타로 인해 원하는 결과를 얻지 못할 수 있다. 그렇기 때문에 이를 해결하기 위해서 변수로 관리하는 방법이 있다.

 

/store/types

export const CATEGORY_REQUEST_START = "CATEGORY/REQUEST_START"
export const CATEGORY_REQUEST_SUCCESS = "CATEGORY/REQUEST_SUCCESS"
export const CATEGORY_REQUEST_ERROR = "CATEGORY/REQUEST_ERROR"

 

 

2. Redux middleware

applyMiddleware와 thunk를 이용하여 store에서 장착한다.

    import { createStore, applyMiddleware } from "redux"
    import thunk from "redux-thunk"
    import rootReducer from "./reducers"
    const store = createStore(rootReducer, applyMiddleware(thunk))

 

 

3. Reducer action 만들기

 

thunk test를 하기 위해서 dispatch를 사용해야 한다.

 

App.jsx

    //마운트 될 때 dispatch를 이용하여 상태를 바꾼다.
    useEffect(() => {
        dispatch(CategoryRequest()) //dispatch의 인자값이 action을 함수
    }, [dispatch])

action.jsx

 

    export const RequestSuccess = (payload) => ({
        type: CATEGORY_REQUEST_SUCCESS,
        payload,
    })

    export const RequestError = (payload) => ({
        type: CATEGORY_REQUEST_ERROR,
        payload,
    })

    // dispatch의 인자값으로 쓰인 함수
    export const CategoryRequest = (props) => {
        return async (dispatch) => {
            dispatch({ type: CATEGORY_REQUEST_START })
            try {
                const response = await request.get("/categories")
                dispatch(RequestSuccess(response.data))
            } catch (error) {
                dispatch(RequestError(error))
            }
        }
    }

 

마운트가 되면서 App컴포넌트에서 dispatch를 실행할 때, 함수를 인자값으로 받고 함수를 실행하는데, 

 

함수 안에서 dispatch로 로딩상태로 만든 후 로딩페이지를 보이게 한 후 비동기 통신으로 요청 후 응답을 받고 그 내용을 가지고 상태를 바꿔준다. 이때 error가 발생하면 try-catch 구문으로 error를 관리할 수 있다.

그리고,  이를 조금 더 간단하게 사용할 수 있다.

 

    export const CategoryRequest = (props) => (dispatch) => {
        dispatch({ type: CATEGORY_REQUEST_START })

        const success = ({ data }) => dispatch(RequestSuccess(data))
        const error = (error) => dispatch(RequestError(error))

        request.get("/categories").then(success).catch(error)
    }

 

다른 로직이 있는 것은 아니지만 위에 있는 async/await 구문 대신 then과 catch를 이용했다. depth가 깊지 않기 때문에 가독성 면에서 좋다.

 

 

---