带回调的 Redux 中间件

Question

我真的很喜欢这样写动作的概念：

function signUp(data, callback) { 
return {
    [CALL_API]: {
      type: 'SOME_TYPE',
      url: `/api/account/signup`, 
      method: 'POST',
      data: data

    }
  }
}

但是对于像signUp 这样的东西，我不想修改/触摸 store 以从服务器获取回调

---

在我的 React 组件中，我有一个动作，它通过动作调用 api 并更改状态。

  this.signUp($(form).serialize(), function(data) {  this.setState({response: data});   }.bind(this))

动作signUp看起来像这样

function signUp(data, callback) { 
 postRequest(
    '/api/account/signup', 
    data, 
    'POST', 
    callback)
}


function postRequest(url, data, method, callback) { 
callback(true); //// just testing  
}

如你所见，与第一个相比，语法和代码长度并不漂亮

---

问题：有没有办法修改 redux 中间件或者有一个替代的 JSON 函数（类似于CALL_API）来接受组件的回调而不接触商店？我真的很想使用CALL_API 语法:)

Answer 1

您可以编写中间件来拦截动作并在不修改存储状态的情况下做一些工作。

// Action creator    
function signUp(data, callback) { 
  return {
      type: CALL_API
      url: '/api/account/signup', 
      method: 'POST',
      data: data,
      callback: callback
  }
}

// Middleware
const actionInterceptor = store => next => action => {
    if (action.type === CALL_API) {
        postRequest(action.url, action.method, action.data, action.callback);
    }
    else {
        return next(action);
    }
}

...

const store = createStore(reducer, initialState, applyMiddleware(actionInterceptor));

Answer 2

我真的很喜欢这样写动作的概念：

...

但对于像注册这样的事情，我不想修改/触摸商店以从服务器获取回调

好的，但是为此使用 redux 有什么意义呢？

我的理解：
你想打电话给dispatch(signUp(data, callback))（简体）

您的注册 actionCreator 应如下所示：

function signUp(data, callback) {
  return function(dispatch) {
    //.. do your stuff with data..
    //.. and call your callback or pass it to another function
  }
}

对不起，如果误解了您的问题，如果仍有不清楚的地方，请写评论。