如何在Redux Toolkit中在同一个切片中使用相同的rejected。

huangapple go评论63阅读模式
英文:

How to use same rejected in same slice in redux toolkit

问题

我有这些额外的reducer:

extraReducers: builder => {
    builder.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
        if (action.payload.status === 200) {
            state.error = '';
            state.userTopics.responsableTopics.push(...action.payload.data);
        } else {
            state.error = action.payload.data;
        }
    });

    builder.addCase(getTopicsByDcResponsable.rejected, (state, action) => {
        state.error = action.payload;
    });

    builder.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
        if (action.payload.status === 200) {
            state.error = '';
            state.userTopics.editorTopics.push(...action.payload.data);
        } else {
            state.error = action.payload.data;
        }
    });

    builder.addCase(getTopicsbyDcentroEdit.rejected, (state, action) => {
        state.error = action.payload;
    });
},

所有被拒绝的情况都会收到相同的错误消息,即后端出现错误时为'Network Error'。

在Redux Toolkit中,您可以为所有错误使用相同的拒绝处理程序。

英文:

I have this extrareducers:

extraReducers: builder => {
    builder.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
      if(action.payload.status === 200){        
        state.error = '';
        state.userTopics.responsableTopics.push(...action.payload.data); 
      } else {
        state.error = action.payload.data;

      }    
    });

    builder.addCase(getTopicsByDcResponsable.rejected, (state, action) => {     
      state.error = action.payload;
    });
         
    builder.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {     
        if(action.payload.status === 200){
          state.error = '';
          state.userTopics.editorTopics.push(...action.payload.data);  
        } else {
          state.error = action.payload.data;
        }   
      });

    builder.addCase(getTopicsbyDcentroEdit.rejected, (state, action) => {     
      state.error = action.payload;
    });
  },

All the rejected recieve the same message in case that the backend has an error 'Network Error'.

In redux you can use the same reducer for all the errors.
How can i use the same rejected in redux Toolkit if all recieve the same error?
Thanks

答案1

得分: 1

以下是翻译好的代码部分:

You can define a single error handler function and pass it to the `builder.addMatcher` method.

Something like this should prevent redundancy.

const handleRejected = (state, action) => {
  state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
};

extraReducers: builder => {
  builder
    .addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
      if (action.payload.status === 200) {
        state.error = '';
        state.userTopics.responsableTopics.push(...action.payload.data); 
      } else {
        state.error = action.payload.data;
      }    
    })
    .addMatcher(
      action => action.type.endsWith("/rejected"),
      handleRejected
    )
    .addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
      if (action.payload.status === 200) {
        state.error = '';
        state.userTopics.editorTopics.push(...action.payload.data);  
      } else {
        state.error = action.payload.data;
      }   
    })
    .addMatcher(
      action => action.type.endsWith("/rejected"),
      handleRejected
    );
},

Edit: You can try this if you want to remove additional `.addMatcher`

const isRejected = action => action.type.endsWith("/rejected");

builder
  .addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
    // Handle fulfilled action for getTopicsByDcResponsable
  })
  .addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
    // Handle fulfilled action for getTopicsbyDcentroEdit
  })
  .addMatcher(isRejected, (state, action) => {
    // Handle all rejected actions
    state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
  });
英文:

You can define a single error handler function and pass it to the builder.addMatcher method.

Something like this should prevent redundancy.

const handleRejected = (state, action) => {
state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
};
extraReducers: builder => {
builder
.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.responsableTopics.push(...action.payload.data); 
} else {
state.error = action.payload.data;
}    
})
.addMatcher(
action => action.type.endsWith("/rejected"),
handleRejected
)
.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.editorTopics.push(...action.payload.data);  
} else {
state.error = action.payload.data;
}   
})
.addMatcher(
action => action.type.endsWith("/rejected"),
handleRejected
);
},

Edit: You can try this if you want to remove additional .addMatcher

const isRejected = action => action.type.endsWith("/rejected");
builder
.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
// Handle fulfilled action for getTopicsByDcResponsable
})
.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
// Handle fulfilled action for getTopicsbyDcentroEdit
})
.addMatcher(isRejected, (state, action) => {
// Handle all rejected actions
state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
});

huangapple
  • 本文由 发表于 2023年2月16日 15:41:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75469146.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定