gpt4 book ai didi

reactjs - 在操作调用源自的 View 中处理 Redux Saga 结果

转载 作者:行者123 更新时间:2023-12-03 14:20:15 24 4
gpt4 key购买 nike

我是 Redux Saga 的新手,来自 Redux Thunk。在某些情况下,我需要从调用操作的 View 内部了解 API 调用是失败还是成功。使用 Redux Thunk,我会执行以下操作。

我的组件和 Action 创建器将如下所示:

class MyComponent extends Component {

componentDidMount() {
this.props.actions.fetchItems()
.then(result => {
if (result.status === 'OK') {
console.log('Request succeeded, take particular action in this view')
}
else {
console.log('Request failed, take other action in this view')
}
})
}

render() {
return (
<div>My view</div>
)
}
}


const mapStateToProps = (state, ownProps) => {
return {
items: state.items,
}
}

const mapDispatchToProps = dispatch => {
return {
actions: bindActionCreators({
...actions,
}, dispatch),
}
}


export default connect(
mapStateToProps,
mapDispatchToProps,
)(MyComponent)



import * as t from './actionTypes'
import {CALL_API} from '../api'

const xhrGetItems = (params) => (dispatch, getState) => {
const action = {
[CALL_API]: {
type: t.XHR_ITEMS_FETCH,
endpoint: `http://www.example.com/myendpoint`,
method: 'get',
}
}
return dispatch(action)
}

我的 API 中间件捕获所有带有 CALL_API 的操作属性,使用 ajax 库进行适当的调用,然后返回一个已履行的 promise 。我的 reducer 设置为处理 api 调用的每种可能状态(成功、失败、挂起)。一直以来,我仍然可以在我的 View 中查看调用的结果。

所以我的问题是,如何使用 Redux Saga 来实现这一点?现在我的 saga api 中间件正在做它应该做的一切,但是当我调用 fetchItems() 时在我看来,结果是一个普通的 JS 对象,所以我无法检查它是否成功。

我的想法也可能是完全错误的。非常感谢任何建议。

最佳答案

redux 和 redux-saga 的常见模式是为 API 调用创建 3 个操作。在你的情况下,我会创建:

  • LIST_ITEMS_START
  • LIST_ITEMS_SUCCEEDED
  • LIST_ITEMS_FAILED

你的传奇看起来像这样:

function* watchListItemsStart() {
yield takeLatest(LIST_ITEMS_START, listItemsStartFlow)
}

function* listItemsStartFlow() {
try {
const result = yield call(api.getItems)

if (result.status === 'OK') {
yield put(LIST_ITEMS_SUCCEEDED, items)
} else {
throw new Error(result.error)
}
} catch (error) {
yield put(LIST_ITEMS_FAILED, error)
}
}

这些传奇故事已经干净地抽象出了 API 的副作用。 reducer 可以专注于状态管理:

switch (action.type) {
case LIST_ITEMS_START:
return {
...state,
isLoading: true,
error: null,
items: [],
}
case LIST_ITEMS_SUCCEEDED:
return {
...state,
isLoading: false,
items: action.payload.items,
}
case LIST_ITEMS_FAILED:
return {
...state,
isLoading: false,
error: action.payload.error.getMessage(),
}
}

现在您的商店中拥有了您需要的一切,可以在组件中进行选择和 react 。

class MyComponent extends Component {
componentDidMount() {
this.props.fetchItems()
}

render() {
const { isLoading, items, error } = this.props

// Here you can react to the different states.

return (
<div>My view</div>
)
}
}

connect(state => ({
isLoading: itemsSelectors.isLoading(state),
items: itemsSelectors.getItems(state),
error: itemsSelectors.getError(state),
}), {
fetchItems: actions.fetchItems
})(MyComponent)

这里重要的一点是,你的组件变得非常愚蠢。它只是获取 props,并不处理 API 调用的结果(这里没有 promise.then)。

希望这个回答对你有帮助。

关于reactjs - 在操作调用源自的 View 中处理 Redux Saga 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43991460/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com