Warum verwenden wir so viele Reduzierer in Redux [geschlossen] ⇐ JavaScript

[Guest]

Ich arbeite an einem Redux-Store, in dem viele Zustände einzeln durch separate Reduzierer aktualisiert werden, wie folgt:

Code: Select all

reducer:{
setShowEmailVerification: (state, action) => {
state.showEmailVerification = action.payload
},
setShowSuccessModal: (state, action) => {
state.showSuccessModal = action.payload
},
setActivityName: (state, action) => {
state.activityName = action.payload
},
setCountryName: (state, action) => {
state.countryName = action.payload
},
setBussinessSectorName: (state, action) => {
state.businessSectorName = action.payload
},
setOpen: (state, action) => {
state.open = action.payload
},
setStage: (state, action) => {
state.stage = action.payload
},
setCompanyId: (state, action) => {
state.companyId = action.payload
},
setCompanyName: (state, action) => {
state.companyName = action.payload
},
setEmail: (state, action) => {
state.email = action.payload
},
setWebsite: (state, action) => {
state.website = action.payload
},
setPhone: (state, action) => {
state.phone = action.payload
},
setCountry: (state, action) => {
state.country_id = action.payload
},
setActivity: (state, action) => {
state.activity = action.payload
},
setUserPassword: (state, action) => {
state.userPassword = action.payload
},
setUserConfirmPassword: (state, action) => {
state.userConfirmPassword = action.payload
},
setCompanyPassword: (state, action) => {
state.companyPassword = action.payload
},
setCompanyConfirmPassword: (state, action) => {
state.companyConfirmPassword = action.payload
},
setPlan: (state, action) => {
state.plan = action.payload
},
setActiveTab: (state, action) => {
state.activeTab = action.payload
state.stage = 1
},
setAddress: (state, action) => {
state.address = action.payload
},
setBusinessSectorId: (state, action) => {
state.businessSector = action.payload
},
setCountryCode: (state, action) => {
state.countryPhoneCode = action.payload
},
setDialCode: (state, action) => {
state.countryDialCode = action.payload
},
setEmoji: (state, action) => {
state.emoji = action.payload
},
setPlanID: (state, action) => {
state.planId = action.payload
},
setFirstName: (state, action) => {
state.firstName = action.payload
},
setLastName: (state, action) => {
state.lastName = action.payload
},
setDepartmentId: (state, action) => {
state.departmentId = action.payload
},
setSubmitted: (state, action) => {
state.submitted = action.payload
},
setOptEmail: (state, action) => {
state.optEmail = action.payload
},
setAgreeTerms: (state, action) => {
state.agreeTerms = action.payload
},
setSignUpLoader: (state, action) => {
state.signUpLoader = action.payload
},
setCountryEmoji: (state, action) => {
state.countryEmoji = action.payload
},
setCompanyInputValue: (state, action) => {
state.companyInputValue = action.payload
},
setCompanyList: (state, action) => {
state.companyList = action.payload
},
setActualCompanyList: (state, action) => {
state.actualCompanyList = action.payload
},

setPhoneError: (state, action) => {
state.phoneError = action.payload
},

setNameError: (state, action) => {
state.nameError = action.payload
},
setisCompanyFormSubmitted: (state, action) => {
state.isCompanyFormSubmitted = action.payload
},
}

Um dies zu vereinfachen, denke ich darüber nach, all dies in einem einzigen Reduzierer wie diesem zu kombinieren:

Code: Select all

  reducers: {
setSignUpForm: (
state,
action: PayloadAction
>
) =>  {
return {
...state,
...action.payload,
}
},
}

Dadurch kann ich bei Bedarf mehrere Status gleichzeitig aktualisieren und den Boilerplate reduzieren. Zum Beispiel:

Code: Select all

dispatch(setSignUpForm({ countryName: "USA", showSuccessModal: true }));

Ich verstehe, dass wir, wenn wir eine komplexe Aktion ausführen müssen, viele Zustände mutieren müssen, separate Reduzierer erstellen können, aber ich habe das Gefühl, dass die Mutation einer einzelnen Variablen keine separaten Reduzierer erstellen muss .
Übersehe ich etwas oder bin ich dankbar, wenn ich auf eine Ressource verweise?