带回调的 Redux 中间件

Question

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

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

    }
  }
}

但是对于 signUp 这样的事情，我不想 modify/touch 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

I really like the concept of having actions written like this:

...

But for thing like signUp I don't want to modify/touch the store to get a callback from server

好的，但是为此使用 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
  }
}

对不起，如果误解了你的问题，如果还有什么不清楚的地方，请写评论。

Answer 2

您可以编写中间件来拦截操作并在不修改商店状态的情况下完成一些工作。

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

带回调的 Redux 中间件

Redux middleware with callback

javascript

middleware

node.js

redux