Redux - 비동기 - 입력 필드 변경시 POST 상태 변경

Question

아주 간단한 양식 필드가있는 응용 프로그램이 있고 데이터베이스에 동기화 된 데이터를 얻기 위해 서버에 대한 POST 요청을 트리거하는 필드의 각 업데이트가 필요합니다.

입력 필드 변경시 동기화 작업이 업데이트 될 필드의 & 키 값으로 전달됩니다. 이 동작은 다음 감속기에서 처리합니다.

export const reducer = (state, action) => { 
    switch(action.type) { 
    case INPUT_FIELD_UPDATE: 
     return Object.assign({}, state, { 
     [action.key]: action.value 
     }); 
    default: 
     return state; 
    } 
}; 

이제 완전히 새로운 업데이트 된 상태를 서버에 게시하고 싶습니다.

1. 어떻게 이것을 redux-saga/redux-thunk를 사용하여 구현할 수 있습니까? 위의 감속기가 상태 업데이트를 완료 한 직후 다른 작업을 트리거하는 것이 맞습니까? 그런 행동을 어떻게 할 수 있습니까?

아래의 답변에 따라 새 값으로 상태를 업데이트 한 다음 사가 처리기 생성기 내에서 서버에 POST 데이터를 업데이트 하겠지만이 구현이 올바른지 확실하지 않습니다. How to fire AJAX calls in response to the state changes with Redux?

<올 시작 = "2">

2. 가 각각 변화 서버와 동기화 전체 상태를 포스트에 맞습니까? 대신 새 값만 게시하고 응답시 앱 상태를 업데이트해야합니까?

3. 완전히 다른 접근 방식을 제안 하시겠습니까? 지금은 꽤 많은 시간 동안 검색 한 후 그 명확히하고 싶습니다

는 내 질문에 명확한 답을 발견하지 않았습니다. redux 스택의 새로운 기능, 내 질문에 얼마나 관련이 있는지 잘 모르겠습니다.

Answer 1

구현은 첫 번째 생각보다 훨씬 간단합니다. 내가해야 할 일은 내 서거에서 동일한 파견 된 행동을 "듣는"것입니다.

function* handleChange(action) { 
try { 
    let state = yield select(state => state); 
    yield put(syncing()); 
    const response = yield call(api,{state}); 
    if(response.updated) { 
     yield put(syncSucceeded()); 
    } else { 
     yield put(syncFailed()); 
    } 
    } catch (e) { 
    yield put(syncFailed(e)); 
    } 
} 

function* mySaga() { 
    yield takeLatest(INPUT_FIELD_UPDATE, handleChange); 
}