Redux 미들웨어 1

리덕스 미들웨어

• 미들웨어가 '디스패치'의 앞뒤에 코드를 추가할 수 있게 해준다.
• 미들웨어가 여러개면 미들웨어가 '순차적'으로 실행된다.
• 미들웨어의 두가지 단계
  - 스토어를 만들 때, 미들웨어를 설정하는 부분
  {createStore, applyMiddleware} from redux
  - 디스패치가 호출될 때, 실제로 미들웨어를 통과하는 부분
• dispatch 메소드를 통해 store로 가고 있는 액션을 가로채는 코드
  
  

redux-devtools

npm i redux-dev-tools-extension -D

// store.js

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(applyMiddleware()));

개발자도구 > Redux 들어가면,
Inspector에서 어플리케이션에서 일어나는 모든 store의 변화를 볼 수 있음
리덕스에 문제가 있을 때, 확인하면 좋음

redux-thunk

• 리덕스 미들웨어
• 리덕스에서 비동기를 처리를 하기 위한 라이브러리
• 액션 생성자를 활용하여 비동기 처리
• 액션 생성자가 액션을 리턴하지 않고, 함수를 리턴
• 액션생성자가 함수를 리턴할 때만 반응하고, 객체를 리턴할 때는 기존 동작처럼 작동함

npm i redux-thunk

// store.js

import thunk from "redux-thunk";

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

dispatch는 action을 store에 전달하는 행위 > 보통 container에서 처리하고 있었는데, redux-thunk에서는 액션생성함수에서 처리
container는 액션생성자를 component에 전달해주는 역할만 할 수 있게 됨.

// actions.js

export function getUsersThunk() {
	return async(dispatch) => {
    	try {
          dispatch(getUsersStart()); // 로딩중
          const res = await axios.get("")
          dispatch(getUserSuccess(res.data)); // 데이터 가져오기 성공
        } catch (error) {
          dispatch(getUsersFail(error)); // 실패
        }
    };
}

// UserListContainer.jsx

export default function UserListContainer() {
  const users = useSelector((state) => stte.users.data);
  const dispatch = useDispatch();
  
  const getUsers = useCallback(() => {
    dispatch(getUsersThunk());
  }, [dispatch]);
  
  return <UserList users={users} getUsers={getUsers} />;
}

redux-promise-middleware

npm i redux-promise-middleware

// store.js

import promise from :redux-promise-middleware";

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk, promise)));


// actions.js
// promise-middleware로 액션을 만들면,
// 해당 액션을 dispatch 했을 때, 액션안의 타입을 자동적으로
// "타입_PENDING", "타입_FULLFILLED", "타입_REJECTED" 생성해줌

const GET_USERS = "GET_USERS";

export const GET_USERS_PENDING = "GET_USERS_PENDING";
export const GET_USERS_FULLFILLED = "GET_USERS_FULLFILLED";
export const GET_USERS_REJECTED = "GET_USERS_REJECTED";

export function getUsersPromise() {
  return {
    type: GET_USERS,
    payload: async () => {
      const red = await axios.get("")
      return res.data;
    }
  };
}


// UserListContainer.jsx

export default function UserListContainer() {
  const users = useSelector((state) => stte.users.data);
  const dispatch = useDispatch();
  
  const getUsers = useCallback(() => {
    dispatch(getUsersPromise());
  }, [dispatch]);
  
  return <UserList users={users} getUsers={getUsers} />;
}

redux-promise-middleware는 어떤 type으로 dispatch할 때,
paylaod에 promise객체가 있으면,
해당 타입의 뒷부분에
"타입_PENDING", "타입_FULLFILLED", "타입_REJECTED"
이렇게 만들어준다.

성공한 경우("타입_FULLFILLED")에는
promise안의 리턴값(데이터)를 action.payload로 넣어주고,
실패한 경우("타입_REJECTED")
error객체를 action.payload로 넣어준다.
("타입_PENDING"은 payload 없음)

(리듀서를 만들 때, data: action.payload, error: action.error 이렇게 넣어주기)