2017-09-16 2 views
1

fetch(api) 호출로 상태를 채우겠다고합니다.실시간으로 ReactRedux에서 상태를 조작하는 방법

state.results.data : 그래서 다음 내 감속기입니다

[ 
    1: { 
    id: '1', 
    name: 'name1', 
    number: 11 
    }, 
    2: { 
    id: '2', 
    name: 'name2', 
    number: 22 
    }, 
    3: { 
    id: '3', 
    name: 'name3', 
    number: 33 
    } 
] 

는 그리고 나는 map 기능에 의해 ListView이 표시됩니다. onPressnumber = number+1에 대한 TouchableOpacity가 있습니다. 이것은 dispatch으로 action을 감속기로합니다. like 버튼과 같습니다. 따라서 2의 가치는 다음과 같습니다.

2: { 
    id: '2', 
    name: 'name2', 
    number: 23  // <= number increased onPress. 
    } 

이 작업을 수행 할 수 있습니다. 번호가 실시간으로 업데이트됩니다. 하지만 데이터베이스에서 어떻게해야합니까? node을 통해 백엔드 쿼리와 패스 쿼리에 MySQL이 있다고 가정 해보십시오. 나는 dispatch to actionnumber의 값을 id=2으로 늘리고이 전화를 api에서 fetchpost으로 보내야한다고 생각합니다. 이제는 시간이 좀 걸릴 것입니다. 두 번째 또는 2와 마찬가지로 db의 실제 데이터는 이미 상태에있는 데이터와 다릅니다. id:2에 대한 최신 정보를 표시하거나이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

희망을 설명했습니다. 설명을 위해 질문에 답할 준비가되었습니다.

감사합니다.

답변

3

redux-thunk과 같은 미들웨어를 사용할 수 있습니다.
이것은 보통 을 발송하는 것과 달리 function을 파견하게합니다.
이제는 을 fetch으로 보낼 수 있고 promise을 반환 할 수도 있습니다. 그 약속이 끝나면 평상시처럼 행동 창조자를 파견 할 수 있습니다. 예를 들어
: 나는 강력하게 (.catch 등)을 수행하는 것이 좋습니다 오류 처리를 포함하지 않았다

// someActions.js 
export function updateSomething(id) { 
    return (dispatch) => { 
     dispatch({type: 'FETCH_IN_PROGRESS'}); 
     fetch(`myServer.com/updateSomething?id=${id}`) 
     .then((response) => response.json()) 
     .then((item) => dispatch({type: "SOMETHING_UPDATED", id})) 
    }; 
} 

참고. 당신은 당신이 주입해야이 미들웨어 상점을 만들 때

는 :

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from './reducers/index'; 

    // Note: this API requires [email protected]>=3.1.0 
    const store = createStore(
     rootReducer, 
     applyMiddleware(thunk) 
    ); 
+0

'그 때는 ((항목) => 파견 ({유형 : "SOMETHING_UPDATED", ID가}))'가 어디 기존 상태를 업데이트 하시겠습니까? 나는'redux-thunk'를 사용하고 있습니다. – Somename

+1

그래, 관련 '감속기'가이 작업을 포착하여 새 상태를 반환해야합니다. –

+0

상태의 해당 객체 만이 논리로 반환되어야한다는 의미입니까? 그리고 전체 국가가 아닙니다. 코드 테스트. – Somename

관련 문제