Engineering_S/W & H/W

  이전에 작성한 글들은 동기화 action입니다. action이 되면 바로 state에 반영되어서 적용이 되었습니다. 하지만 비동기인 상황에서는 대기시간이 걸립니다. 예로들어 API를 이용하여 데이터를 fetch하는 경우 입니다. 통신 상태에 따라 시간이 불규칙적으로 걸릴수 있기 때문입니다.  이번에는 axios 또는 fetch을 이용하여 코드를 짜보도록 하겠습니다. 일단 fetch을 하여 최종적으로 redux storage에 저장하는 것이 목적입니다. 그러기 위해서는 가장먼저 state를 설계해야 합니다. 내용과 구조는 아래와 같습니다. loading : API를 통해서 데이터를 다운로드 받고 있는 중일때 true, 완료 혹은 error는 false data : fetch(혹은 axios)를 통해 받은 데이터를 저장(여기서는 유저정보) error: fetch도중 에러가 발생시 error메세지 저장 State = {      loading : true,       data : [ ],      error: '' } 이제 action.type을 결정해야 합니다. 여기서 설정할수있는 action은 3가지 입니다. 내용은 아래와 같습니다. FETCH_USERS_REQUEST : users 리스트를 fetch합니다. FETCH_USERS_SUCCESS : fetch가 성공적으로 마무리 됬습니다. FETCH_USERS_FAILURE : fetch도중 error가 발생. 이제 reducer를 설정해야 하는데 위의 action을 이용하여 설정할수 있습니다. action.type FETCH_USERS_REQUEST   - loading : true FETCH_USERS_SUCCESS - loading : false - users : data (해당 API를 통해 다운) FETCH_USERS_FAILURE - loading : false - err : ...

이 글을 작성하면서 express의 middleware와 기능적인 면에서 비슷하다는 것을 알았습니다. 아래 링크를 참고해 주시기 바랍니다. 링크 : node.js Express Middleware 사용법 Redux의 middleware장점 1. 커스텀 기능을 확장할수 있는 방법 2. dispatching와 action사이에 제 3자 extension 접점을 제공하고 reducer에 도달한다. 3.  logging, 에러 리포트 등등 middleware에 사용이 가능하다. 일단 이번 예제에서는 Logger를 middleware에 사용하겠다.  Redux에 사용할 logger npm 사이트 https://www.npmjs.com/package/redux-logger 위 사진처럼 redux-logger를 설치한다. // 로거를 생성하기 위한 require const reduxLogger = require ( 'redux-logger' ); const logger = reduxLogger . createLogger (); 이전에 사용한 코드 맨 위쪽에 가서 위 2줄을 추가해 준다. 이렇게 하면 logger의 설정은 마무리가 됬다. // middleware추가하기 const applyMiddleware = redux . applyMiddleware ; 이제 middleware를 추가하기 위해서 위 코드를 작성해 줍니다. // 1. app의 state를 갖고 있는다. (인자로 reducer) // createStore를 이용하여 storage를 생성 // 다른 reducer가 합쳐진 rootReducer를 인자로 갖습니다. // createStore의 두번째 인자로 middleware가 추가 됬고 middleware의 인자는 logger이다. const storage = createStore ( rootReducer , applyMiddleware ( logger )); 저번 글의 마지막에서 2개의 reducer를 combineRe...

 저번에 장난감가게를 비유로 간단한 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...