Redux 기초 - 노션 백업

리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다.

리덕스는 프로젝트 내부의 상태를 하나의 단일 스토어에 저장하고, dispatch를 이용하여 action을 발생시킨 뒤 reducer를 통해 상태를 변경하는 것.

Action → Dispatcher → Store → View → Action → Dispatcher (반복...)

Action

상태에 어떠한 변화가 필요하면 액션이라는 것이 발생한다.

• 액션 객체는 반드시 type 필드를 가지고 있어야 함. 액션의 이름이라고 생각하면 됨

{
    type: 'ADD_TODO',
    data: {
        id: 1,
        text: '리덕스 배우기
    }
}

• 액션 생성 함수

const addTodo = (data) => {
    return {
        type: 'ADD_TODO',
        data
    }
}

Reducer

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

const reducer=(state, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                counter: state.counter + 1
            };
        default:
            return state;
        }
}

Store

한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.

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

Dispatch

스토어의 내장 함수 중 하나.

액션을 발생시키는 것

dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출

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

Subscribe

스토어의 내장 함수 중 하나.

subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될 때마다 호출됩니다.

const listener = () => {
    console.log('상태가 업데이트 됨');
}

const unsubscribe = store.subscribe(listener);

unsubscribe();

프로젝트 설정

1. 설치

npm i redux react-redux