使用 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的主要内容,如果未能解决你的问题,请参考以下文章