리덕스 라이브러리

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다.

리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다.

• 리덕스를 사용하면?
  1. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
  2. 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.
  3. 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것마능로 충분하지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있다.
  4. 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해 주기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다.

개념

1. 액션(Action)

상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 이는 하나의 객체로 표현된다.

{
  type: 'TOGGLE_VALUE'
}

액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 되며, 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이다.

export const SET_CURRENT_USER   = "SET_CURRENT_USER";
export const LOGOUT             = "LOGOUT";
export const REGISTER_SUCCESS   = 'REGISTER_SUCCESS';
export const GET_ERRORS         = 'GET_ERRORS';

 

2. 액션 생성 함수(Action creator)

액션 객체를 만들어 주는 함수이다.

function setCurrentUser(user){
  return {
     type: SET_CURRENT_USER,
     payload: user
  }
}

어떤 변화를 일으켜양 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 

이러한 일을 방지하기 위해 이를 함수로 만들어서 관리한다.

 

3. 리듀서(Reducer)

리듀서는 변화를 일으키는 함수이다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 준다.

const user = (state = {}, action) => {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        isAuthenticated: true,
        profile: action.payload
      };
    case LOGOUT:
      return {
        isAuthenticated: false,
        profile: {}
      };
    default:
      return state;
  }
};

export default user;

 

4. 스토어(Store)

프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만든다. 한 개의 프로젝트는 단 하나의 스토어만 가질 수있다.

스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닌다.

 

5. 디스패치(Dispatch)

스토어의 내장 함수 중 하나이다. 디스패치는 '액션을 발생시키는 것' 이라고 이해하면 된다.

이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.

이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 준다.

 

6. 구독(subscribe)

구독도 스토어의 내장 함수 중 하나이다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

 

const listener = () => {
  console.log('상태가 업데이트 되었습니다!');
}

const unsubscribe = store.subscribe(listener);

unsubscribe();