Redux란?
Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.
Redux는 단방향으로 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험 또한 제공한다.
단방향 : Action → Dispatcher → Store → View → Action
흐름 파악하기
- 컴포넌트에서 이벤트 발생시
dispath로action을reducer에 전달한다 reducer에서action객체를 받아서state값을 변경하는 로직을 실행 하고store에 변경된state를 반영한다.
📌 스토어 (Store)
리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다.
스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고 추가적으로 몇가지 내장 함수들이 있다.
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store/reducers";
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<Routes />
</Provider>,
document.getElementById("root")
);useSelector
const items = useSelector((store) => store.cartReducer);useSelector를 통해 스토어의 특정 state를 가져올 수 있다.
📌 구독 (Subscribe)
subscribe(listener)
컴포넌트는 스토어에 구독을 할 수 있다. 구독을 하는 과정에서 특정 함수가 스토어에 전달이 된다. 그리고 나중에 스토어의 상태값에 변동이 생긴다면 전달 받았던 함수를 호출해준다.
📌 디스패치 (Dispatch)
dispatch(action) : 상태 업데이트
import { useDispatch } from "react-redux";
import { sortByPopularity } from "../../store/actions/exporterActions";
const Component = () => {
const dispatch = useDispatch();
const optionSelector = e => {
const payload = e.target.value;
dispatch(sortByPopularity(payload));
};
}- 컴포넌트에 어떤 이벤트가 일어나서 상태를 업데이트 할 때
dispatch라는 함수를 통하여action을 스토어한테 전달한다. 액션은 상태에 변화를 일으킬때 참조할 수 있는 객체이다. - 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있ㄴ는지 확인하고 액션을 참고하여 새로운 상태를 만들어준다.
HHJ velog 🍔