Redux Thunk 以不同的顺序处理网络响应

Question

我有一个文本输入字段（通过 Thunk）查询服务器用户文本的有效性。由于这些请求可以非常快速地连续发生，因此它们可能会以与发送时不同的顺序从服务器返回。因此，文本字段中的字符串可能显示为无效，而实际上它是有效的。

为解决此问题，我在收到服务器响应时执行检查 - 文本字段的当前内容是否与检查的内容相同？如果没有，请再次检查。我觉得应该有比查询 DOM 元素值更好的方法来处理这种情况。

我如何才能跟进从 post 服务器请求之前的请求？

export function updateUserCode(code) {
    return dispatch => {
        return dispatch(validateUserCode(code))
    }
}

function validateUserCode(code) {
    return dispatch => {
        dispatch(updateCode(code))
        return fetch(`/api/code/${code}`)
            .then(response => response.json())
            .then(json => dispatch(receiveValidatedCode(code, json)))
            .catch(error => {Log.error(error)})
    }
}

function receiveValidatedCode(code, data) {
    const lastval = document.getElementById('usercode').value
    if (code != lastval) {
        // Code not the same as current value
        // need to validate again
        return updateUserCode(lastval)
    }
    if(data.success) {
        return {
            type: types.CODE_VALIDATED,
            code: code,
        }
    }
    return {
        type: types.CODE_INVALID,
        reason: data.reason,
    }
}

Answer 1

在你的逻辑中乱用 DOM 确实不太理想。我建议将最后输入的文本字段值保留在 Redux 存储中并在 reducer 中执行检查。

此外，如果当前输入的值与上次解析的请求所验证的值不同，我认为重新验证用户输入没有任何意义。忽略此类响应，不要执行不必要的请求。

就代码而言，您可以这样做：

// actions
const requestValidation = value => ({ type: 'request-validation', value });

const receiveValidation = (value, result) => ({ type: 'receive-validation', value, result });

export const validateUserCode = code => dispatch => {
  dispatch(requestValidation(code));
  return fetch(`/api/code/${code}`)
         .then(response => response.json())
         .then(json => dispatch(receiveValidation(code, json)))
         .catch(error => {Log.error(error)})
}

// reducer
export const validationReducer = (state = {}, action) => {
  if (action.type === 'request-validation') 
    return ({ value: action.value, isValidating: true });

  if (action.type === 'receive-validation' && state.value === action.value) 
    return ({ value: action.value, isValid: !!action.success });

  return state; 
};

这不是生产质量代码，我不确定它是否有效，但它反映了这个想法。

Redux Thunk 以不同的顺序处理网络响应

Redux Thunk handling network responses in a different order

javascript

redux

redux-thunk

fetch-api