我有一个用于客户端的减速器，另一个用于 AppToolbar 和其他一些...
现在假设我创建了一个 fetch 操作来删除客户端，如果它失败，我在 Clients reducer 中有代码应该做一些事情，但我也想在 AppToolbar 中显示一些全局错误。
但是客户端和 AppToolbar 减速器不共享状态的相同部分，我无法在减速器中创建新动作。
那么我该如何显示全局错误呢？谢谢
更新 1：
我忘了说我用的是este devstack
更新 2： 我将 Eric 的答案标记为正确，但我不得不说我在 este 中使用的解决方案更像是 Eric 和 Dan 的答案的组合......你只需要在你的代码中找到最适合你的.. .
如果你想有“全局错误”的概念，你可以创建一个errorsreducer，它可以监听addError、removeError等...动作。然后，您可以挂接到您的 Redux 状态树state.errors并在适当的地方显示它们。
有多种方法可以解决这个问题，但总体思路是全局错误/消息值得他们自己的 reducer 与<Clients />/完全分开<AppToolbar />。当然，如果这些组件中的任何一个需要访问，errors您可以errors在需要时将它们作为props传递给它们。
更新：代码示例
这是一个示例，说明如果您将“全局错误”传递errors到顶层<App />并有条件地呈现它（如果存在错误），它可能会是什么样子。使用react-reduxconnect将您的<App />组件连接到一些数据。
// App.js
// Display "global errors" when they are present
function App({errors}) {
return (
<div>
{errors &&
<UserErrors errors={errors} />
}
<AppToolbar />
<Clients />
</div>
)
}
// Hook up App to be a container (react-redux)
export default connect(
state => ({
errors: state.errors,
})
)(App);
并且就动作创建者而言，它会根据响应调度（redux-thunk）成功失败
export function fetchSomeResources() {
return dispatch => {
// Async action is starting...
dispatch({type: FETCH_RESOURCES});
someHttpClient.get('/resources')
// Async action succeeded...
.then(res => {
dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body});
})
// Async action failed...
.catch(err => {
// Dispatch specific "some resources failed" if needed...
dispatch({type: FETCH_RESOURCES_FAIL});
// Dispatch the generic "global errors" action
// This is what makes its way into state.errors
dispatch({type: ADD_ERROR, error: err});
});
};
}
虽然您的减速器可以简单地管理一系列错误，但可以适当地添加/删除条目。
function errors(state = [], action) {
switch (action.type) {
case ADD_ERROR:
return state.concat([action.error]);
case REMOVE_ERROR:
return state.filter((error, i) => i !== action.index);
default:
return state;
}
}
Erik 的回答是正确的，但我想补充一点，您不必为添加错误而触发单独的操作。另一种方法是使用一个 reducer 来处理带有error字段的任何操作。这是个人选择和惯例的问题。
例如，来自具有错误处理功能的Reduxreal-world示例：
// Updates error message to notify about the failed fetches.
function errorMessage(state = null, action) {
const { type, error } = action
if (type === ActionTypes.RESET_ERROR_MESSAGE) {
return null
} else if (error) {
return error
}
return state
}
我目前针对一些特定错误（用户输入验证）采取的方法是让我的子减速器抛出异常，在我的根减速器中捕获它，并将其附加到操作对象。然后我有一个 redux-saga，它检查动作对象是否有错误，并在这种情况下用错误数据更新状态树。
所以：
function rootReducer(state, action) {
try {
// sub-reducer(s)
state = someOtherReducer(state,action);
} catch (e) {
action.error = e;
}
return state;
}
// and then in the saga, registered to take every action:
function *errorHandler(action) {
if (action.error) {
yield put(errorActionCreator(error));
}
}
然后将错误添加到状态树中，就像 Erik 描述的那样。
我非常谨慎地使用它，但它使我不必复制合法属于减速器的逻辑（因此它可以保护自己免受无效状态的影响）。
编写自定义中间件来处理所有与 api 相关的错误。在这种情况下，您的代码将更加简洁。
failure/ error actin type ACTION_ERROR
export default (state) => (next) => (action) => {
if(ACTION_ERROR.contains('_ERROR')){
// fire error action
store.dispatch(serviceError());
}
}
我所做的是将所有错误处理集中在每个效果的基础上
/**
* central error handling
*/
@Effect({dispatch: false})
httpErrors$: Observable<any> = this.actions$
.ofType(
EHitCountsActions.HitCountsError
).map(payload => payload)
.switchMap(error => {
return of(confirm(`There was an error accessing the server: ${error}`));
});