我有一个针对客户的减速器,另一个针对AppToolbar的减速器,还有一些其他的减速器…
现在让我们说我创建了一个删除客户端的提取操作,如果失败,我在Clients reducer中会有代码,该代码应该做一些事情,但是我也想在AppToolbar中显示一些全局错误。
但是客户端和AppToolbar减速器不共享状态的同一部分,因此我无法在减速器中创建新的动作。
那么我应该如何显示全局错误?谢谢
更新1:
我忘了提到我使用este devstack
更新2: 我将Eric的答案标记为正确,但是我不得不说,我在este中使用的解决方案更像是Eric和Dan的答案的结合……您只需要找到最适合自己代码的方法即可。 。
如果要使用“全局错误”的概念,则可以创建一个errorsreducer,它可以监听addError,removeError等操作。然后,您可以连接到Redux状态树,state.errors并在适当的地方显示它们。
errors
state.errors
您可以通过多种方法来解决此问题,但是总体思路是,全局错误/消息应利用自己的reducer与<Clients />/ 完全分开<AppToolbar />。当然,如果需要访问这些组件中的任何一个,则可以在需要时将其作为道具errors传递errors给他们。
<Clients />
<AppToolbar />
更新:代码示例
这是一个示例,说明如果将“全局错误”传递errors到顶层<App />并有条件地呈现(如果存在错误),可能会看起来像。使用react- reduxconnect将<App />组件连接到一些数据。
<App />
connect
// 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}); }); }; }
虽然reducer可以简单地管理一系列错误,但可以适当地添加/删除条目。
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; } }