주제를 위해서 참고한 자료는 생활코딩 Redux 수업소개, Redux homepage, React Redux 튜토리얼 그리고 FLUX 강의이다.
리덕스에 대해 이야기 하기 전에 보고 지나갈 리덕스의 3가지 기본 원칙이 있다.
-
Single source of truth -> store
항상 같은 곳에서 데이터를 가지고 온다. 데이터를 저장하는 Store라는 하나의 공간이 있다. -
State is read-only -> Action
리액트에서는 state를 변경하려면 반드시 setState라는 메서드를 활용 해야만 변화가 가능했다. 리덕스에서는 action이라는 객체를 통해서 state를 변경할 수 있다. -
Changes are made with pure functions -> Reducer
변경은 순수함수로만 가능하다.
오늘의 공부기록
Redux homepage
리덕스 홈페이지에 접속하면 가장 위에 써있는 문구는 아래와 같다.
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 (A predictabl state container for JavaScript apps).
우리가 코딩할때 위험한 것이 바로 복잡성이다. 복잡성이 증가하면 예측이 불가능하기 때문이다. 리덕스는 어플리케이션의 복잡성을 낮춰서 예측 가능하게 만들어 준다. 이것은 리덕스 3가지 기본원칙 중 Single source of truth와 연결된다. 리덕스는 하나의 상태를 가진다는 특징이 있다. 상태를 하나만 가짐으로써 복잡성을 낮추는 것이다.
그리고 이 상태는 직접 접근하지 못하게 막아놓고, dispatch와 reducer를 이용해서만 접근 가능하게 해놓는다. 데이터를 가져갈때도 getState를 통해서만 가져갈 수 있다. 이런 방법으로 예기치 않게 state를 바꾸는 문제를 사전에 차단한다.
리덕스에서 중요한 개념들
Store
Redux는 앱의 전체 상태 트리를 가지고 있는 스토어 이다. 안의 상태를 바꾸는 방법은 오직 Store에 액션을 보내는거 뿐이다.
스토어는 안의 메서드들이 들어 있는 객체이다.
거대한 창고 같은 것이라고 생각하면 된다.
Action을 보내는 방법은
dispatch(action)이렇게 Action을 보낸다.
Action
위에서 Action은 객체 형태로 key중에 type이 필수적으로 포함되어 있어야 한다.
{
type: "ADD_MESSAGE",
message: ["안녕"],
}이런식으로 말이다.
Action 객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.
Reducer
Reducer는 현재 state와 Action을 통해서 다음 state를 생성한다.
Reducer는 보통 Switch문으로 분기를 생성해서 알맞은 요청 분기를 선택해서 요청을 보낸다.
요청은 보통 Object.assign()메서드를 사용해서 immutable을 유지시켜서 예측 불가능한 변화를 최대한 줄인다.
const messageReducer = (prevState, action) => {
switch (action.type) {
case Add_MESSAGE:
return Object.assign({}, prevState, {
message: [...prevState.message, action.payload]
});
case REMOVE_MESSAGE:
let filtered = prevState.meassge.filter((el) => el.message !== action.payload.message)
return Object.assign({}, prevState, {
message: filtered,
});
default:
return prevState;
}
}이런 방식으로 말이다.
