Engineering_S/W & H/W

 저번에 장난감가게를 비유로 간단한 Redux를 만들어 봤습니다. 이제 이 사장은 쿠기(cookie)를 팔려고 계획중입니다. 그래서 기존 직원을 교육시켜 쿠키도 팔수 있도록 훈련을 시켰습니다. 훈련이 완료된후 판매을 시작했습니다. 이 그림에서 보연 알다싶이 직원이 이제 2가지 행동(action)을 하는것을 알수 있습니다. 이 점을 기억하시고 코드를 살펴봐 주시기 바랍니다. // Action const BUY_TOY = 'BUY_TOY' ; // type을 설정한다(문자열) const BUY_COOKIE = 'BUY_COOKIE' ; // type을 설정한다(문자열) function buyToy (){ // 고객이 장난감을 살때 return { type : BUY_TOY , info : 'First step of redux action' }; }; function buyCookie (){ // 고객이 쿠키를 살때 return { type : BUY_COOKIE , info : 'First step of redux action' }; }; 저번에 1개의 function만 있었다면 이번에는 buyCookie가 추가됬습니다. 이 action은 고객이 쿠키를 살때 사용할 function입니다. // 초기 state상태 const initialState = { numOfToy : 10 , // 초기에 장난감이 10개 numOfCookie : 15 } 당연히 초기상태에 이제 쿠키의 갯수(15개)가 state에 추가됬습니다. 이제 initialState에는 초기 장난감과 쿠기의 갯수가 각각 저장되어 있습니다. const reducer = ( state = initialState , action ) =...

 이제 새로운 직원을 뽑아서 전담하여 쿠키만 판매할려고 합니다. 그러기 위해서 새로운 직원(reducer)을 뽑아야 겠죠.  // Action const BUY_TOY = 'BUY_TOY' ; // type을 설정한다(문자열) const BUY_COOKIE = 'BUY_COOKIE' ; // type을 설정한다(문자열) function buyToy (){ // 고객이 장난감을 살때 return { type : BUY_TOY , info : 'First step of redux action' }; }; function buyCookie (){ // 고객이 쿠키를 살때 return { type : BUY_COOKIE , info : 'First step of redux action' }; }; 고객의 action은 장난감 또는 쿠키를 구매하는 것이기 때문에 이전 코드와 동일하게 작성합니다. // 초기 state상태(2개의 initial state) const initialToyState = { numOfToy : 10 , // 초기에 장난감이 10개 } const initialCookieState = { numOfCookie : 15 , // 초기에 쿠키는 15개 } 이제 이전 글에서는 1개의 initialState를 사용했지만 이번에는 분할하여 각각 initialToyState, initialCookieState로 나누어 줍니다. // 장난감 전담 직원(toyReducer) const toyReducer = ( state = initialToyState , action ) => { switch ( action . type ){ // action의 타입을 확인하여 case...