Redux

리액트에서 상태를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리 입니다.

상태 관리 로직을 컴포넌트가 아닌 밖에서 처리합니다.

리덕스는 스토어라는 개체 내부에 상태를 담아 두고 사용합니다.

Redux Flow

스토어(Store) 는 객체 내부에 상태를 가지게 됩니다. 스토어 에서 모든 상태관리가 일어나고 상태의 어떤 변화를 일으켜야 할 때는 액션(Action) 을 스코어에 전달합니다. 액션은 객체 형태로 상태를 변화 시킬 때 이 객체를 참조하여 변화를 일으킵니다. 액션 객체를 스토어에 전달하는 과정을 디스패치(Dispatch) 라고 부릅니다. 스토어가 액션을 디스패치하면 리듀서(Reducer) 가 전달받은 액션을 기반으로 상태를 어떻게 변화시킬지 결정합니다. 액션을 처리하면 새 상태를 스토어에 저장하고 이렇게 상태가 바뀌게 되면 스토어를 구독(Subscribe) 하고 있는 컴포넌트에 바로 전달이 되면서 리렌더링(Rerendering) (리덕스에 연결하는 함수를 이용하여 컴포넌트를 스토어에 구독 시키는 것)됩니다.

주요 개념

Action

리덕스에서의 Action은 React state처럼 state를 바꾸는 방식입니다. 액션 객체를 가지고 있으며 반드시 type 필드를 가지고 있어야 합니다. 추가적으로 변화시킬 값을 인자를 통해 추가할 수 있습니다.

// 방법 1
{
	type: "LOGOUT"
}

// 방법 2
{
	type: "LOGIN",
	data: {
		id: 0,
		text: "Login"
	}
}

Reducer

변화를 일으키는 함수로 Action의 결과로 스토어의 state를 어떻게 바꿀지 정의하는 부분입니다.