使用 promise/thunk 通过 action 将参数传递给 reducer
Pass argument through action to reducer with promise/thunk
我正在使用带有 Promise/thunk 的 React 和 Redux 作为中间件。效果很好。
有些事情我想不通。以下作品:
我从我的组件发送一个动作:
this.props.dispatch(addTag({ name: name, photoId: this.props.photoId}))
我的操作执行一个 ajax 包装在 thunk 和 returns 一个承诺:
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})
})
}
}
减速器将其拾取:
case 'ADD_TAG_FULFILLED': {
newState = state
.set('tags', action.payload.tags)
.set('inputValue', '')
return newState
}
现在,如果我想将传递给操作的有效负载传递给减速器怎么办? (为了让 i 进入状态并返回到组件......
我只能通过混合 Thunk 和某种 "breaking" 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) => {
return (response.json())
})
.then((json) => {
dispatch({type: "ADD_TAG", payload: {suggestions: json, pl: payload})
})
.catch((err) => {
dispatch({type: "ADD_TAG", payload: err})
})
}
}
解决方案是:
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 的 React 和 Redux 作为中间件。效果很好。
有些事情我想不通。以下作品:
我从我的组件发送一个动作:
this.props.dispatch(addTag({ name: name, photoId: this.props.photoId}))
我的操作执行一个 ajax 包装在 thunk 和 returns 一个承诺:
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})
})
}
}
减速器将其拾取:
case 'ADD_TAG_FULFILLED': {
newState = state
.set('tags', action.payload.tags)
.set('inputValue', '')
return newState
}
现在,如果我想将传递给操作的有效负载传递给减速器怎么办? (为了让 i 进入状态并返回到组件...... 我只能通过混合 Thunk 和某种 "breaking" 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) => {
return (response.json())
})
.then((json) => {
dispatch({type: "ADD_TAG", payload: {suggestions: json, pl: payload})
})
.catch((err) => {
dispatch({type: "ADD_TAG", payload: err})
})
}
}
解决方案是:
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 });
});
};
}