[React]08. 리액트 Redux

💚 리덕스(Redux)

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

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

💚 리덕스(Redux) 주요 개념

💛 액션(Action)

상태의 변화가 필요할 때 발생

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

아래 코드에서는 type과 todo객체를 만들어 추가해주었습니다.

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

💛 액션 생성 함수(Action Creator)

액션(Action)을 생성해주는 함수

액션 생성 함수(Action Creator)는 파라미터를 받아서 액션 객체 형태로 만들어주는 일을 하는데요.

아래 AddTodo라는 액션 생성 함수는 todo매개변수를 받아서 액션을 생성하여 줍니다.

export const AddTodo = (todo) => {

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

액션 생성 함수를 사용하지 않고도 액션을 발생시킬 때마다 액션 객체를 직접 작성하여 사용할 수 있습니다.

💛 리듀서(Reducer)

변화를 일으키는 함수
state와 action 두 개의 인자 받음

리듀서(Reducer)는 전달받은 인자를 상태(state)와 액션(action)을 참고해 새로운 상태를 반환해줍니다.

아래 코드는 TodoReducer코드인데요! 상태(state)와 액션(action)을 받아 액션 타입에 따라 해당 코드를 실행합니다.

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)

현재 애플리케이션의 상태와 리듀서(Reducer) 스토어의 내장 함수를 포함

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

💛 디스패치(Dispatch)

스토어(Store)의 내장 함수 중 하나
액션을 발생시키는 역할

디스패치(Dispatch)에는 액션(Action)을 파라미터로 전달합니다.

💛 구독(Subscribe)

스토어(Store)의 내장 함수
함수 형태의 값을 함수의 인자로 받음

구독(Subscribe)에 특정 함수를 전달해주면, 액션이 디스패치(Dispatch)될 때마다 전달해준 함수를 호출해줍니다.

💚 리덕스(Redux)의 규칙

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

여러개의 스토어 만들어 사용할 수 있지만 권장되지 않는 방법이 아니기 때문에 스토어는 하나만 사용하는게 좋습니다.

💛 상태는 읽기 전용!

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

💛 리듀서는 순수함수!

순수 함수의 반환 값은 전달받은 파라미터에만 의존해야 하며, 같은 파라미터의 결과값은 항상 동일해야 합니다. 리듀서 또한 똑같은 파라미터를 전달받아 호출된다면 결과값으로 같은 값을 반환해야 합니다.

다음 포스팅에서는 리덕스를 적용한 todolist를 만들어 보도록 하겠습니다!

참고 링크

벨로퍼트와 함께하는 모던 리액트