React+Fluxxor+ajax용 flux TODO 응용 프로그램
12875 단어 jQueryReactJavaScriptfluxxorflux
만약vol86의 React라면 외부 API와 합작했다는 인상을 남기기 어렵지만vol87의 보도 샘플을 이동해 본 결과
말은 그렇지만 아직 멀었어, 땀
한 일
React에 익숙해져서 flux로 가는 절차입니다.
버튼만 누르면 카운터 숫자가 바뀌는 카운터 프로그램
먼저 TODO 어플리케이션 만들기
샘플은 여기에 두세요.https://github.com/n0bisuke/react-study/tree/todo-flux
문장 Flux 구성 프레임워크인 Fluxor를 사용하여 설명합니다.
빠르지만 실행하면 이런 느낌이에요.
Flux 설명 등 Web+DB Press 읽어주세요.
Fluxxor에 ajax 처리 추가 시도
Web+DB Press의 글은 약간 애정이 가는 부분을 설명합니다.
서버에서 json 데이터를 HTTP 요청을 통해 가져와 TODO 목록으로 표시하도록 변경하려고 합니다.겸사겸사 샘플은 여기에 두겠습니다.https://github.com/n0bisuke/react-study/tree/todo-flux-ajax
비동기 통신 시스템의 처리는 Action을 시작으로 하기 때문에 Action부터 처리에 따라 설명해 보세요.(토닥토닥 환영!)
0.jQuery 읽기 및 JSON 데이터 준비
jQuery
$.ajax()를 사용해 보십시오.jQuery 로드는 index입니다.html 쪽에 썼어요.index.html
<html>
<head>
<title>TODOリスト</title>
</head>
<body>
<div id="app-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script charset="utf-8" src="dest/app.js"></script>
</body>
</html>
todos.json
[{
"text": "ほげ"
},
{
"text": "ふが"
}
]
1. laadTodos 메서드를 Action Creator에 추가
먼저 Action은
定数で定義された、アクションの識別子 및 {value:1}などの入力値に相当するオブジェクト 의 쌍입니다.따라서 LOAD_TODOS_SUCCESS 식별자를 정의하십시오.일곱째 줄
app.jsx
/*省略*/
var constants = {
ADD_TODO: "ADD_TODO",
TOGGLE_TODO: "TOGGLE_TODO",
LOAD_TODOS_SUCCESS: "LOAD_TODOS_SUCCESS" //追記
};
/*省略*/
방법 내 기술
$.ajax()에서의 처리.aax 처리가 완료되었을 때
.done() 처리 중this.dispatch(), Dispacher를 통해 데이터를 Store로 보냅니다.app.jsx
/*省略*/
var actions = {
//追加
loadTodos: function(){
$.ajax({
url: "./todos.json"
}).done(function(data){
this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
}.bind(this));
},
/*省略*/
this.dispatch() 중 (constants.LOAD_TODOS_SUCCESS, {data: data} 부분은 Store 작업을 요청하는 메시지인 것 같습니다(= 동작)..bind(this) 부동주의!이것은 Web+DB Press 측의 코드 오류일 수 있습니다.JS의this함정.2. Store에서 동작 및 방법 연결
방금 동작이 Store에 전송되었을 때 실행된 처리 및 관련
제17행
app.jsx
/*省略*/
var TodoStore = Fluxxor.createStore({
initialize: function() {
this.todoId = 0;
this.todos = {};
this.bindActions(
constants.ADD_TODO, this.onAddTodo,
constants.TOGGLE_TODO, this.onToggleTodo,
constants.LOAD_TODOS_SUCCESS, this.onLoadTodosSuccess //追記
);
},
/*省略*/
this.bindActions()에서 방금 정의한 LOAD_TODOS_SUCCESS 동작은 메시지를 Store에 보낼 때의 방법으로 연결됩니다.여기에는 onLoadTodosSuccessメソッド 과 관련이 있습니다.근처
app.jsx
/*省略*/
//追加
onLoadTodosSuccess: function(payload){
payload.data.forEach(function(item){
var id = ++this.todoId;
var todo = {
id: id,
text: item.text,
complete: false
};
this.todos[id] = todo;
}.bind(this));
this.emit('change');
},
/*省略*/
onLoadTodosSuccessメソッド의 내용입니다.id를 늘리면서 데이터를 추가하는 처리입니다.payload발송아까 (61줄)의{data:data}부분.즉, http 통신을 통해 얻은 내용(todos.json의 내용은 그대로 유지)이다.
Action 방면에서 비동기 처리를 써서 처리가 끝났을 때의 데이터를 Store에 보내고 Store에서 비동기 처리를 하지 않으면 데이터 흐름이 명확해진다.
제47행라고 합니다.View Store에서 관리하는 데이터에 변경 사항이 있음을 알려 줍니다.
이렇게 하면 View에 도달하면 일반적인 TODO 응용 프로그램과 같다.
3. View 측면에서 ActionCreator 점화
1과 2로 처리된 트리거는 View 측면에 있습니다.
이 작업은 뷰를 로드할 때 수행됩니다.
80행
app.jsx
/*省略*/
getInitialState: function() {
this.getFlux().actions.loadTodos(); //追加: viewの呼び出し時にロード
return { newTodoText: "" };
},
/*省略*/
this.emit('change');에서 호출getInitialStateメソッド하여 읽기 완료 시 Ajax로 데이터를 처리합니다.총결산
쓰기 서버 측의 처리가 지루하기 때문에 오프라인으로 추가 데이터를 검사하지 않았지만 같은 분위기에서 쓸 수 있다고 생각합니다.
나는 내가 Flux의 절차를 이해했다고 생각한다...!
이제 저는 밀크코코아와 콜라보레이션을 하고 싶어요!
→ http://qiita.com/n0bisuke/items/f28016de82136a2a4d26
Reference
이 문제에 관하여(React+Fluxxor+ajax용 flux TODO 응용 프로그램), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n0bisuke/items/f19dd3958fb099373247텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
