Web 응용 프로그램은 대화하는 속도로 개발하자 ~ React과 BFF에서 빠르게 프로토 타이핑 기술 - 3

Flux에서 모의 ​​Action Creator와 모의 Store를 만들려고 (2)

1. 모의 Action Creator

　Action Creator에서 더미의 Action을 생성하고 dispatch()전달합니다. 실제로 API와 DB를 호출하지 않지만 전화했다고 가정하고 결과를 Action 형식으로 dispatch()전달합니다.

const ActionCreators = { 
  getArticle : () => Dispatcher . dispatch ({ type : 'type1' , data : { id : 1 , text : 'How to use ...' }}) : }         
        

　모의 API도 물리적 API가 존재하는 경우, API의 설계에 약간의 어려움이 있었다고해도 프론트 엔드 측에서 무리를하고 쉽습니다. 모의 API 이전 단계에서 모의 ​​Action Creator를 만들어 시행 착오하여 프런트 엔드 내부 디자인을 세련 할 수 있습니다.

모의 Action Creator의 네트워크 투명성

　프로토 타입 단계에서 시위를 할 때 네트워크의 영향을 배제하고 응용 프로그램의 동작을 고정하려면 아닐까요. 다음은 모의 Action Creator를 사용하여 미리 취득한 트윗을 이용하는 예입니다.

import mockTweet from `../ mock / tweet.json` ; // 미리 취득한 Tweet const ActionCreators = { 
  fetchTweet :() => Dispatcher . dispatch ({ type : 'foo' , data : mockTweet }) : }  
     
    

　네트워크 상태에 따라 API로부터 취득하거나 모의 데이터를 사용하거나 분리 할 수 ​​있습니다. 다음은 API가 오류 때만 모의 데이터를 사용하는 예입니다.

fetchTweet :() => api . get ( url ) . then ( res => Dispatcher . dispatch ({ type : 'foo' , data : body })) // API를 취득한 Tweet . catch ( Dispatcher . dispatch ({ type : 'foo' , data : mockTweet })) // 미리 취득한 Tweet 
     
   

　네트웍 상태를 설정하고 처리를 전환 할 수 있습니다.

fetchTweet :() => isReachable
   ? api . get ( url ) then ( body => Dispatcher . dispatch ({ type : 'foo' , data : body })) // API를 취득한 Tweet : dispatch ({ type : 'foo' , data : mockTweet }) // 미리 취득한 Tweet   
   

방법 2. 모의 Store

　View에 표시 할 데이터를 처음부터 Store에 저장할 수있는 방법입니다. 구체적으로는 Store에서 getInitialState()의 반환 값 모의 데이터를 설정합니다.

class Store extends ReduceStore { 
  getInitialState () { return [{ id : 1 , text : '' }, { id : 2 , text : '' }, ...]; } : }     
         
  
  

　모의 Store는 유연성은 아니지만 지금까지 소개 한 가운데에서 가장 빠르게 View를 구축 할 수있는 방법이라고 말할 수 있겠지요.

　React과 Flux를 사용하면 응용 프로그램의 View에서 상태 (Store) 및 작업 (Action Creator)를 깨끗하게 분리 할 수 ​​있습니다. 프론트 엔드의 모든 요소를 ​​컴포넌트 화하고 유연하게 모의와 진짜를 전환 할 수있어 프로토 타입에서 실전까지 지속적으로 개발을 진행할 수 있습니다.