[React] 12. 리덕스(Redux) 개념 정리하기

리덕스란, 

효율적으로 상태관리를 해줄 수 있는 라이브러리

리덕스는 리액트에만 종속되는 라이브러리가 아닙니다. 다른 UI 라이브러리나 프레임워크와도 함께 사용할 수 있습니다.

 

리덕스 개념 정리!

액션(Action)

상태의 변화가 필요할 때 발생하는 것을 액션(Action)이라고 합니다.

액션에는 type 속성을 필수로 가지고 있어야 하는데요! 이 외의 속성은 자유롭게 추가해줄 수 있습니다.

아래 코드에서는 todo라는 객체에 id와 text를 추가해주었어요!

{
  type: "ADD_TODO",
  todo: {
    id: 0,
    text: "리덕스 공부 시작!"
  }
}

액션 생성 함수(Action Creator)

액션 생성 함수는 액션(Action)을 생성해주는 함수로, 파라미터를 받아 액션 객체 형태로 만들어주는 일을 합니다.

AddTodo 함수는 todo라는 인자를 받아서 액션을 생성하여 줍니다! 액션 생성 함수를 사용하지 않고도 액션을 발생시킬 때마다 액션 객체를 직접 작성하여 사용할 수 있습니다.

export const AddTodo = (todo) => {

	return {
    	type : 'ADD_TODO',
        todo
    };
};

리듀서(Reducer)

변화를 일으키는 함수로, state와 action 두 개의 인자를 받아옵니다. 이렇게 리듀서(Reducer)는 전달받은 인자를 상태와 액션을 참고해 새로운 상태를 반환해줍니다.

function TodoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: state.todos.concat({ id: id++,text: payload.text})
      };
    default:
      return state;
  }
}

스토어(Store)

리덕스에서는 애플리케이션 하나당 하나의 스토어를 만들 수 있는데요!

이 스토어(Store)는 현재 애플리케이션의 상태와 리듀서(Reducer) 스토어의 내장 함수를 포함하고 있습니다.

디스패치(Dispatch)

스토어(Store)의 내장 함수 중 하나로, 액션을 발생시키는 역할을 합니다. 디스패치(Dispatch)에는 액션(Action)을 파라미터로 전달합니다.

구독(Subscribe)

구독 또한 스토어(Store)의 내장 함수로 함수 형태의 값을 함수의 인자로 받는데요! Subscribe(구독)에 특정 함수를 전달해주면, 액션이 디스패치(Dispatch)될 때마다 전달해준 함수를 호출해줍니다.

 

리덕스 규칙 정리!

애플리케이션 하나당 스토어는 하나!

여러개의 스토어 만들어 사용할 수 있지만 권장되지 않는 방법입니다. 

 

상태는 읽기 전용!

기존의 상태는 유지하고 새로운 상태를 업데이트해주는 방식을 사용함으로써 개발자 도구를 통해 Undo/Redo가 가능합니다.

절대로 직접 수정하지 말아야 합니다.

 

리듀서는 순수함수!

순수 함수의 반환 값은 전달받은 파라미터에만 의존해야 하며, 같은 파라미터의 결과값은 항상 동일해야 합니다.

리듀서 또한 똑같은 파라미터를 전달받아 호출된다면 결과값으로 같은 값을 반환해야 합니다.