Question

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

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

    }
  }
}

但对于signUp之类的内容，我不想修改/触摸商店以从服务器获取回调

在我的 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

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

...

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

好的，但是为什么要使用redux？

我的理解：
您想致电dispatch(signUp(data, callback))（简化）

您的signUp 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中间件

2 个答案: