Redux 정리

Redux는 다음과 같은 순서로 상태를 관리합니다.
1.상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2.이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
3.Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
4.Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
상태가 변경되면, React는 화면을 다시 렌더링 합니다.

즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다. 아래에서 Redux의 각각의 개념들을 코드 예시를 통해 좀 더 구체적으로 살펴보고, 단계별로 구현해 보세요.

1.Store
Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다. Redux 앱의 state가 저장되어 있는 공간이죠. 아래 코드와 같이 createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있습니다.

그럼 스토어 세팅을해보자.

import { createStore } from 'redux';
const store = createStore(rootReducer);

사용하고자하는범위를 Provider을 통해 감싸준후 props로내려주듯 설정해주면됨.

2.Reducer

3.Action

4.적용