Redux
Redux는 state를 관리해주는 라이브러리다. 일단 로직은 이러하다
Action Creator → Action → Dispatch → Reducers → State
각각의 요소들이 무엇인지 파악하기 이전에 보험회사에 보험금을 청구하는 과정으로 Redux를 이해해보자! 해당 내용은 Udemy Modern React with Redux 라는 강의를 듣고 적어보았다.
보험회사에 보험금을 청구하는 과정을 살펴보자면…
고객이 보험회사에 영수증 제출 → 영수증전달 → 접수직원이 받음 → 해당부서로 넘김 → 고객정보 확인 후 보험금 지급인데… 위의 Redux의 과정과 동일하다고 보면 된다! 이걸 코드로 써보자.
codepen의 js탭을 눌른다음 Redux 선택하고 코드를 적으면 된다. 코드를 다 치고나서 결과는 개발자도구의 콘솔창에서 확인할 수 있다!
Action Creator & Action
// 고객이 영수증 제출
const createPolicy = (name, amount) => {
return {
// Action
type: 'CREATE_POLICY', // Action에는 꼭 type이 있어야함.
payload: { // 영수증 세부내역
name: name,
amount: amount
}
};
};
// 보험회사에서 고객정보 삭제
const deletePolicy = (name) => {
return {
type: 'DELETE_POLICY',
payload : {
name: name
}
};
};
// 보험회사에서 고객에게 보험금 지급
const createClaim = (name, amountOfMoneyToCollect) => {
return {
type: 'CREATE_CLAIM',
payload: {
name: name,
amountOfMoneyToCollect : amountOfMoneyToCollect
}
};
};Reducers
// 보험급 지금내역
// parameter 내부에서 default값은 빈 배열로 선언해준다.
const claimHistory = (oldListOfClaims = [], action) => {
if (action.type === 'CREATE_CLAIM') {
return [...oldListOfClaims, action.payload];
//old에 새로 들어온 action.payload를 push하는 과정
//reducer 안에 push를 쓰면 안된다!
}
return oldListOfClaims;
};
// 보험회사가 가지고 있는 총 자산
// bagOfMoney의 default 값은 100으로 주었다.
const accounting = (bagOfMoney = 100, action) => {
if (action.type === 'CREATE_CLAIM') {
// 고객이 보험금 청구시 보험회사 자산에서 요청한 금액만큼 차감
return bagOfMoney - action.payload.amountOfMoneyToCollect;
}
else if (action.type === 'CREATE_POLICY') {
// 신규고객 가입시 보험회사의 자산에 금액이 추가됨
return bagOfMoney + action.payload.amount;
}
return bagOfMoney;
}
// 가입회원 목록
const policies = (listOfPolicies = [], action) => {
if (action.type === 'CREATE_POLICY') {
return [...listOfPolicies, action.payload.name];
}
else if (action.type === 'DELETE_POLICY') {
return listOfPolicies.filter(name => name !== action.payload.name);
}
return listOfPolicies;
}const { createStore, combineReducers } = Redux;
이러한 선언을 통해 Redux에서 저 메소드들을 쓸 수 있는 것일듯.. 아마?
const ourDepartments = combineReducers({
accounting: accounting,
claimHistory : claimHistory,
policies: policies
});
const store = createStore(ourDepartments);
store.dispatch(createPolicy('Alex', 20));
store.dispatch(createPolicy('Jim', 30));
store.dispatch(createPolicy('Bob', 40));이 과정까지 마친 다음 콘솔을 찍어보자.
console.log(store.getState());
현재까지 보험회사 총 자산은 190이고, 고객은 Alex, Jim, Bob 3명이다.
근데 약간의 변화를 줘보자!
store.dispatch(createClaim('Alex', 120));
store.dispatch(createClaim('Jim', 50));
store.dispatch(deletePolicy('Bob'));Alex와 Jim이 보험금을 청구했고, Bob은 보험을 해지했다. 다시 한번 콘솔을 찍어보면
190에서 Alex와 Jim이 청구한 보험금이 빠져나서 보험회사의 자산은 20 claimHistory를 보면 보험금을 청구한 사람과 금액이 나오고, policies 배열을 보면 Bob이 보험을 해지했기 때문에 2명만 나온다.
우리가 보통 리액트에서 상태관리 하려면 this.state 어쩌구를 썼는데 Redux 세상에서는 state 관리를 직접적으로 하는것 대신 dispatch를 이용해서 한다!
일단 대충 Redux의 원리는 이러하고… 그 다읍번 포스팅에서 Redux에 대해 좀 더 자세히 써볼 예정쓰!!!
Reference
- Udemy, Modern React with Redux