[React] 리덕스

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

 

리덕스를 사용하면 컴포넌트의 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음.

 

리덕스 라이브러리는 전역상태를 관리할 때 효과적! 

context API를 통해서도 같은 작업이 가능하나, Context API가 생기기전에는 리덕스를 사용해 전역 상태를 관리함.

 

 

 

액션

- 상태에 어떠한 변화가 필요하면 액션이 발생

- 하나의 객체로 표현

- type필드를 반드시 가지고 있어야 하며, 액션의 이름이라고 생각하면 된다.

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

액션생성함수

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

function addTodo(data) {
	return {
    type: 'ADD_TODO',
    data
    };
}

화살표 함수로도 액션 생성 함수를 만들 수 있다.

const ChangeInput = text => ({
	type:'CHANGE_INPUT',
    text
});

어떠한 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 직접 작성하면 번거롭거나 실수로 정보를 놓칠수도 있기 때문에 함수로 미리 만들어 놓는다.

 

리듀서

- 변화를 일으키는 함수

액션을 만들어서 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.

두 값을 참고하여 새로운 상태를 만들어서 반환

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

스토어

- 프로젝트에 리덕스를 적용하기 위해 스토어를 만듦

디스패치

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

- '액션'을 발생시키는 것

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

구독

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

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

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

unsubscribe(); //추후에 구독을 비활성화할 때 함수 호출