Redux 기본 사용법 #1 [whentoomeet 리팩토링 #2]

김태훈·2022년 4월 26일
0

Redux

목록 보기
1/1

이번 글에는 whentoomeet의 리펙토링 프로젝트인 jungsi 프로젝트를 진행하며 겪은 Redux 활용기에 대해 이야기 해보고자 한다.

먼저, Redux에 대해 알아보고 차근차근 프로젝트 과정 중에 있었던 일들에 대해 적어보도록 하겠다.

Redux의 구조는 다음과 같다.

0. Dispatch

디스패치는 스토어의 내장함수로 액션을 발생시키는 하나의 수단이다.

// Login.Container.js
 const body = {
      email,
      password,
    };
    
dispatch(loginUser(body))

위와 같이 작성할 수 있다.

1. Action && Middleware

view에서 dispatch를 통해 action을 실행시킨다. 이는 상태에 변화가 필요할 때 이용하는 방법이다.

// action/user_action.js
export async function loginUser(dataToSubmit: LoginUserResponse) {
  const request = await axios
    .post("/api/users/login", dataToSubmit)
    .then((res) => res.data);
  let loginState;
  if (request.loginSuccess) {
    loginState = true;
  } else {
    loginState = false;
  }
  return {
    type: LOGIN_USER,
    payload: loginState,
  };
}

위와 같이 작성할 수 있다. reducer로 보내기 전에 middleware를 통해 API호출을 하거나 특정 작업을 실행할 수 있는데 위의 함수에서는 액션 안에서 한 번에 처리해주고 있다.

대개는

const middleware = store => next => action => {
  // 작업
}
function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 작업...
    };
  };
};

처럼 작성하며 middleware로의 역할을 확실하게 구분지어준다.

2. Reducer

리듀서는 변화를 실질적으로 발생시키는 함수이다. action을 통해 받아온 값을 현재 state 값에서부터 nextState 값으로 바꿔주는 구간이다.

// reducer/user_reducer.js
export default function (state = {}, action: any) {
  switch (action.type) {
    case LOGIN_USER:
      return { ...state, loginState: action.payload };
      break;

    default:
      return state;
  }
}


여기까지의 흐름을 알아보도록 하자. 먼저, dispatch(loginUser())을 통해 action을 실행시키고 action에서는 다음 상태가 될 값을 정해준다. 그리고 이 nextState를 Reducer로 보내 store 내에 있는 이전 값을 다음 값으로 바꿔주게 된다.

위 코드를 보면 기존 state(...state 이 부분)이 다음 값인 loginState: action.payload로 바뀌게 될 것이다.

3. Store

이렇게 리듀서까지 작성하고 실행시킨 뒤 devtools로 state의 값을 확인해보면 state의 값에 loginState: action.payload(값)이 나와있는 것을 확인할 수 있을 것이다.

4. View

이 저장된 값을 다시 꺼내오고 싶을 때는 useSelector를 이용하면 편하게 가져올 수 있다.

값을 쉽게 가져오기 전 해야할 작업이 있는데 index 파일에 provider를 설정해 주는 작업이다.

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import { store } from "./_reducers/store";

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

이렇게 App을 Provider로 감싸준 뒤 스토어에 저장된 값을 사용하고 싶은 곳에서 useSelector를 통해 값을 가져오면 된다.

import { useSelector } from "react-redux";

const user= useSelector((state) => state);

이렇게 하면 user에 user.loginState가 담겨있고 이를 활용해 프로젝트를 진행할 수 있다.


여기까지 Redux의 기본 사용 방법에 대해 알아보았다. 다음 블로그는 Redux의 라이브러리들에 대해 다뤄보도록 하겠다.

profile
1일 1커밋 1블로그!

1개의 댓글

comment-user-thumbnail
2022년 5월 16일

👍👍👍

답글 달기