我有一个异步thunk从Web服务获取一些信息,它可以调度三种类型的操作
FETCH_REQUESTED
FETCH_SUCCEEDED
FETCH_FAILED
最后,如果它成功了;它返回实际响应或错误对象。
我有一个组件应该检测操作是否失败,最好是通过订阅FETCH_FAILED
操作并根据错误类型显示错误消息(404/401和其他状态代码)
export const fetchData = () => {
return async (dispatch, getState) => {
const appState = getState();
const { uid } = appState.appReducer;
await dispatch(fetchRequested());
try {
const response = await LookupApiFactory().fetch({ uid });
dispatch(fetchSucceeded(response));
return response;
} catch (error) {
dispatch(fetchFailed());
return error;
}
}
}
我对还原和反应很新,所以我有点不确定我是否朝着正确的方向前进,任何帮助都会受到赞赏。
要实现适当的redux回调和存储机制,您应该有一个商店来保存所有数据,
const store = createStore(todos, ['Use Redux'])
然后,你将数据发送到商店,
store.dispatch({
type: 'FETCH_FAILED',
text: reposnse.status //Here you should give the failed response from api
});
然后,您可以使用订阅功能从任何组件中的商店获取值。每次调度操作时都会调用它,并且状态树的某些部分可能已经更改。
store.subscribe(()=>{
store.getState().some.deep.property
})
这是Redux的一个简单实现。随着您的应用程序变得越来越复杂,您需要将还原功能拆分为单独的功能,每个功能使用combineReducers
管理状态的独立部分。您可以从redux.js site获得更多信息
最常见的方法是使用connect
库中的react-redux
函数。这是一个订阅状态变化的HoC。看一下这个库,另外它允许你将你的动作创建者绑定到dispatch,这使你能够从组件中调度你的动作。
你可以像这样使用它:
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ data, error }) => (
<div>
{error && (
<span>Error occured: {error}</span>
)}
{!error && (
<pre>{JSON.stringify(data, null, 2)}</pre>
)}
</div>
);
const mapStateToProps = (state) => ({
data: state.appReducer.data,
error: state.appReducer.error
});
export default connect(mapStateToProps)(MyComponent);
您可以在jsx中使用条件渲染,如上所示,或使用guard子句,如下所示:
const MyComponent = ({ data, error }) => {
if (error) {
return (
<span>Error occured: {error}</span>
);
}
return (
<pre>
{JSON.stringify(data, null, 2)}
</pre>
);
}
假设减速器,
对于FETCH_FAILED
动作,你可以放一些有意义的标志,表示有一些失败。基于该标志你可以显示错误信息或做其他动作。
const testReducers =(state,actione)=>{
case 'FETCH_FAILED' : {
return {
...state,{ error_in_response : true }
}
};
default : return state;
}
在容器中,您可以获取该标志并将其传递给组件。
假设combineReducers
用于组合减速器;
const mapStateToProps=(state)=>{
return {
error_in_response : state.testReducers.error_in_response
}
}
connect(mapStateToProps)(yourComponent)
在您的组件中,可以使用this.props.error_in_response
访问它