[Redux] 리액트 - 리덕스 적용

이전 게시물에서 리덕스 개념에 대해서 간단히 언급한 적이 있다.

 

실제 프로젝트를 진행하면서 리액트에 리덕스를 사용함으로 인해 간단한 사용법을 정리하게 되었다.

 

리덕스는 어플리케이션 - 액션 - 리듀서 - 스토어 - 어플리케이션 으로 처리된다.

 

여기서 스토어라는 단일저장소를 이용하여 필요에 따라서 사용할 수 있게 상태값과 함수를 가져다 사용할 수 있다.

 

Action

 

액션타입(action type)

 

state의 변화를 액션값으로 정의해준다.

export const CHANGE_ACTION_EXAM = 'CHANGE_ACTION_EXAM';

 

액션 생성자(action creator)

 

액션을 만들어주는 함수인 액션생성자를 통해 파라미터를 받아와 액션객체 형태로 만들어 준다.

 

export const setActionExam = (action) => {
  return {
    type: CHANGE_ACTION_EXAM,
    data,
  };
};

export const initialState = {
  data : [],
};

 

리듀서(reducer)

 

리듀서는 순수한 함수형태로 만들어야 하며 두가지 파라미터를 받은 후 state를 산출해서 리턴한다.

const reducer = (state = initialState, action) => {
   
    case CHANGE_ACTION_EXAM:
      return { ...state, data: action.data };
    
    default:
      return state;
  }
}

 

store

 

액션에 따라 상태를 수정하는 리듀서를 단일저장소인 스토어에 저장한다.

 

createStore를 통해 리듀서를 스토어에 입력해주면 된다.

import { createStore } from "redux";
import { reducer } from "./reducer"

const store = createStore(reducer);

스토어까지 완성한 이후 리덕스를 리액트에 적용하기 위해서 App.js 파일에  다음과 같이 입력해준다.

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";
import { Provider } from "react-redux";


ReactDOM.render(
  <Provider store={store}>
      <Routes />
  </Provider>,
  document.getElementById("root")
);

이로서 action -> reducer -> store 로 이어지는 사이클이 완성 되었다.

 

Dispatch

 

이제 리덕스를 컴포넌트에서 적용하기 위해 디스패치를 사용한다.

 

디스패치는 스토어에 내장된 함수로 액션을 발생시킨다.

 

최근 hooks를 이용한 함수형으로 작성하는 추세라 react-redux의 useDispatch를 이용한다.

 

import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { reducer } from '../reducers';

export default function changeAction() {
  const dispatch = useDispatch();
  const setChange = useCallback((payload) => reducer(addTodo(payload)), []);
  return setChange;
};

 

간단하게 리덕스를 리액트에 적용하는 방법에 대해 정리해 보았다.

 

처음 리덕스를 공부할때는 액션, 리듀서, 스토어에 대해 이해가 가지 않았다.

 

프로젝트를 진행하면서 리덕스를 사용하는 법을 다시 익히게 되었고, 액션을 필요한 곳에서 가져다 쓰는 방식이 편하게 느껴졌다.

 

또한 클래스형 컴포넌트를 hooks로 전환하면서 코드가 간결해지는 것을 배웠다.

 

이번 프로젝트에서 조금 더 적응해본 다음 다음 프로젝트에서 제대로 적용해볼 생각이다.