12. Redux

리덕스란?

- 상태 관리 라이브러리

- 컵포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능

- 컴포넌트들간에 공유되는 상태를 여러 컴포넌트를 거치지 않고 손쉽게 상태 값 전달 및 업데이트 가능

- 전역상태를 효율적이고 체계적으로 관리 가능

- 미들웨어 기능을 이용하여 비동기 작업을 효율적으로 처리

 

리덕스 기초 개념

1. 액션, action

- 어떤 상태로 변화하는지 'type'이라는 키의 값으로 표현하는 하나의 객체

- type 키의 값 이외의 값들은 상태 업데이트시 참고하는 값

// action example
{
 type:'ADD_TODO',
 data:{
	id:1,
        text:'redux 공부'
      }
}

 

2. 액션 생성 함수, action creator

- 액션 객체를 만들어 주는 함수

// action creator example
function addTodo(data) {
	retrun {
    		type:'ADD_TODO',
        	data
        };
}

 

3. 리듀서, reducer

- 액션생성함수가 return한 액션객체를 파라미터로 전달받아 값을 참고하여 새로운 state를 만들어 반환하는 함수

- 리듀서는 순수함수로 이전상태와 액션객체를 파라미터로 전달받아 새로운 상태를 return한다. 이때 파리미터 이외 값에는 의존하지 않는다

- 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다

// reducer function example
const initialState = {
	counter:1
};

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

 

4. 스토어, store

- 스토어 안에는 현재 애플리케이션의 상태, 리듀서, 몇가지 내장함수(dispatch, subscribe, ...)가 존재

- 한 개의 프로젝트는 한 개의 스토어만 존재

 

5. 디스패치, dispatch

- 스토어의 내장함수 중 하나로, 액션객체를 파라미터로 받아서 실행하면 스토어의 리듀서 함수가 실행되어 새로운 상태를 만든다

 

6. 구독, subscribe

- 스토어의 내장함수 중 하나로, 리스너함수를 파라미터로 전달받아 호출하면 액션이 디스패치되어 상태가 업데이트 될때마다 리스너함수를 실행시킨다.