React+Flexxor+Milkcoa에서flumx의TODO 응용 #geekhouseday

12929 단어 ReactJavaScriptfluxxorfluxmilkcocoa
React+Flexxxor+ajax에서flumx의 TODO 응용와 함께 읽으십시오.
웹+DB 프레스의 vol86과 87에서 이토 나오토의 React.js+Fulux 기사가 있어서 공부했어요.

리액트Milkcocoa와 잘 연결되지 않을 것 같아 저번 보도 코드를 기반으로 밀크코코 연합을 시도했다.
지난번에 백엔드 개발이 번거로웠기 때문에 POST를 통해 데이터를 저장하는 메커니즘이 없었다.밀크코아 사용으로 이전 개발만으로도 데이터를 축적할 수 있다.(실시간 기능은 Milkcoa의 특색으로 이번에는 데이터 저장 부분만 한다.)
제목은 교본상회의 보도를 참고한 것이다React+Fluxxor+socket.IO로 flumx 채팅을 했어요.
※ 그나저나 주택일 이 행사는 온라인에서 하는 것 같아서 이 기회를 틈타 해시태그를 붙여봤습니다.(옛 기타하우스 주민←)

복습하다.


지난번 인코딩은 여기 있습니다.
https://github.com/n0bisuke/react-study/tree/todo-flux-ajax
Ajax 통신 기능이 포함된 TODO 응용 프로그램

React+Flexxor의 TODO 응용 프로그램과 Millcocoa를 연결해 보세요.


완성된 코드는 여기 있습니다.https://github.com/n0bisuke/react-study/blob/origin/todo-flux-milkcocoa-1/src/app.jsx
다음은 설명입니다.

0. 밀카오의 준비


https://mlkcca.com/부터 프로그램을 등록하세요.
밀카오 앱 관리 화면에서 확인app_id.
index.html에서 Milkcoa의 프로그램 라이브러리를 읽습니다.
index.html
<html>
  <head>
    <title>TODOリスト</title>
  </head>
  <body>
    <div id="app-container"></div>
    <script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>
    <script charset="utf-8" src="dest/app.js"></script>
  </body>
</html>

1. app.jsx에서 Milkcoa와의 연결 정보 기술하기


3-4행
app.jsx
var React   = require('react');
var Fluxxor = require('fluxxor');
var milkcocoa = new MilkCocoa("{app_id}.mlkcca.com"); //追加
var Mds = milkcocoa.dataStore('todos'); //追加

/*省略*/
제3행 app자신의 환경 기술 id에 따라 4행에서 제작todos한 데이터 가게와 그 데이터 가게의 연결.
데이터 저장소는 임의의 이름으로 명명되었다.

2. Action(Action Creator)의 loadTodos 방법을 Milkcoa로 쓰기


저번에 로드토스 내용은 이랬어요.jQuery의.aax () 를 통해 데이터를 가져옵니다.
app.jsx
/*省略*/
loadTodos: function(){
    $.ajax({
      url: "./todos.json"
    }).done(function(data){
      this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
    }.bind(this));
  },
/*省略*/
이번에는 밀코코의 데이터숍stream()에서 데이터를 받아 제작하는 것으로 변경됐다.문서는 여기.입니다.
↓
63-67행
app.jsx
/*省略*/
  loadTodos: function(){
    Mds.stream().sort('desc').next(function(err, data){
      this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
    }.bind(this));
  },
/*省略*/
지난번과 마찬가지로 비동기 처리가 끝났을 때 호출this.dispatch()으로 동작을 상점에 보냅니다.

상점 방면의 미세한 조정


제48행
app.jsx

/*省略*/
  onLoadTodosSuccess: function(payload){
    payload.data.forEach(function(item){
      var id = ++this.todoId;
      var todo = {
        id: id,
        text: item.value.text, //変更: Milkcocoa
        complete: false
      };
      this.todos[id] = todo;
    }.bind(this));
    this.emit('change');
  },

/*省略*/
48행은 Milkcoa 객체의 모양에 따라 미세하게 조정됩니다.

3. Action(Action Creator)의 addTodo 메서드 변경


지난번에 addTodo 방법을 설명하지 않은 것은이런 느낌..
app.jsx
/*省略*/
 addTodo: function(text) {
    this.dispatch(constants.ADD_TODO, {text: text});
  },
/*省略*/
view에서 보낸 텍스트 정보를 Store에 동작 정보로 재생합니다.
↓
일흔 번째 줄
app.jsx
/*省略*/
addTodo: function(text) {
    Mds.push({'text' : text },function(err, pushed){
      this.dispatch(constants.ADD_TODO, {text: pushed.value.text});
    }.bind(this));
  },
/*省略*/
Milkcoapush()로 데이터를 데이터 저장소에 저장합니다.Action 내에서만 비동기적으로 처리하는 에티켓이기 때문에 저장된 콜백this.dispatch()으로 데이터를 Store로 보냅니다.

4. 실행해 본다


따라서 데이터를 추가할 때 밀카오에 저장하고, 페이지를 읽을 때 밀카오에서 데이터를 가져오는 TODO 애플리케이션도 가능하다.

총결산


Ajax의 처리 부분을 조금만 고쳐 쓰면 밀카오와 협업할 수 있다.Flex 구성이라면 연결 주소의 일부만 바꾸면 변경이 가능합니다.적어도 React 부분의 View는 같은 코드를 사용할 수 있고 다른 BaaS와 자신의 백엔드와도 간단하게 합작할 수 있을 것 같다.
다음에는 밀카오로 실시간 통신을 해보고 싶다.
※ 저번에는 이쪽React+Flexxxor+ajax에서flumx의 TODO 응용이었어요.
ViewHolder를 사용하여 list 성능 최적화
호출할 수 없는 오류 대응

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage