使用 promise/thunk 通过 action 将参数传递给 reducer

Posted

技术标签:

【中文标题】使用 promise/thunk 通过 action 将参数传递给 reducer【英文标题】:Pass argument through action to reducer with promise/thunk 【发布时间】:2017-07-11 16:52:53 【问题描述】:

我正在使用带有 Promise/thunk 的 react 和 redux 作为中间件。效果很好。

有些事情我想不通。以下作品:

我从我的组件中调度一个动作:

this.props.dispatch(addTag( name: name, photoId: this.props.photoId))

我的动作执行了一个用 thunk 包裹的 ajax 并返回一个 promise:

export function addTag(payload) 


var url = "/api/photos/".concat(payload.photoId, "/addtag?name=" ,payload.name)
  return function(dispatch) 
    var request = new Request(url, headers: headers);
    fetch(request)
      .then((response) => 
        dispatch(type: "ADD_TAG", payload: response.json())
      )
      .catch((err) => 
        dispatch(type: "ADD_TAG", payload: err)
      )
  

reducer 把它捡起来:

  case 'ADD_TAG_FULFILLED': 
    newState = state
      .set('tags', action.payload.tags)
      .set('inputValue', '')
    return newState
  

现在,如果我想将传递给动作的有效负载传递给减速器怎么办? (为了让 i 进入状态并返回组件...... 我只能通过混合 Thunk 和“打破”承诺中间件功能来做到这一点......这是最好的解决方案吗?

export function addTag(payload) 
  var url = "/api/photos/".concat(payload.photoId, "/addtag?name=" ,payload.name)
  return function(dispatch) 
    var request = new Request(url, headers: headers);
    fetch(request)
      .then((response) => 
        return (response.json())
      )
      .then((json) => 
        dispatch(type: "ADD_TAG", payload: suggestions: json, pl: payload)
      )
      .catch((err) => 
        dispatch(type: "ADD_TAG", payload: err)
      )
  

【问题讨论】:

你为什么说你破坏了中间件功能? 有问题的组件应该接收新的 redux 状态(不要与组件状态混淆)作为道具,您是否使用带有 connect() 函数的库 'react-redux' 来执行此操作? 只要您有权调度,您就可以触发操作并将有效负载传递给减速器 -> 在此示例中,仅当获取成功时才传递有效负载,如果您想始终调度它,只需执行它在 catch 语句之后的下一个承诺中(你可以随意链接它们) 【参考方案1】:

解决办法是:

export function tagInput(tagInput) 
  var url = '/api/photos/get_tag_list?term='.concat(tagInput);
  return function (dispatch) 
    var request = new Request(url,  headers: headers, method: 'GET' );
    fetch(request)
      .then(response => 
        dispatch( type: 'TAG_INPUT', payload: response.json() );
      )
      .catch((err) => 
        dispatch( type: 'TAG_INPUT_ERROR', payload: err );
      )
      .then(() => 
        dispatch( type: 'TAG_INPUT_VALUE', payload: tagInput );
      );
  ;

【讨论】:

以上是关于使用 promise/thunk 通过 action 将参数传递给 reducer的主要内容,如果未能解决你的问题,请参考以下文章

Android常用系统广播

手撕redux

没有路由匹配缺少必需的键:[:id]。破坏

wordpress添加文章固定字段

PHP的两种表单数据提交方式

使用 Rails 将字节数组转换为 HTML 图像?