Redux - 异步 - 输入字段更改时的 POST 状态答案

【问题标题】：Redux - Async - POST state on input field changeRedux - 异步 - 输入字段更改时的 POST 状态
【发布时间】：2017-09-15 06:43:48
【问题描述】：

我有一个包含一些非常简单的表单字段的应用程序，并且希望在每次更新字段时触发对服务器的 POST 请求，以便在数据库中同步数据。

在输入字段更改时，将使用要更新的字段的键和值调度同步操作。此操作由以下 reducer 处理。

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

现在我想将整个新的更新状态发布到服务器。

如何使用 redux-saga/redux-thunk 来实现？在上述reducer完成更新状态后立即触发另一个动作是否正确？如何触发此类操作？

根据下面的响应，我将使用新值更新状态，然后将数据发布到 saga 处理程序生成器中的服务器，但我不确定此实现是否正确。 How to fire AJAX calls in response to the state changes with Redux?

POST 整个状态并在每次更改时将其与服务器同步是否正确？是否应该只发布新值并在响应时更新应用状态？
您会建议一种完全不同的方法吗？

我想澄清一下，经过一段时间的搜索，我的问题没有找到任何明确的答案。 Redux 堆栈中的新成员，我不太确定我的问题可能有多相关。

【问题讨论】：

标签： asynchronous redux redux-thunk redux-saga

【解决方案1】：

实现比最初想象的要简单得多。我唯一需要做的就是在我的 sagas 中“听到”相同的调度动作。

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);
}

【讨论】：