ERREUR: Un producteur IMMER a renvoyé une nouvelle valeur * et * modifié son ébauche. Soit renvoyer une nouvelle valeur * ou * modifier le brouillon

Question

Donc, je suis nouveau à Redux Toolkit.

J'ai mon réducteur

const userAuthSlice = createSlice({
    name: "userAuth",
    initialState: {
        token: '',
    },
    reducers: {
        setToken: (state, action) => state.token = action.payload.test,
    },
});

Et j'ai ma commande d'expédition

<button
   value={text.sign_in.submit}
   onClick={() => dispatch(userAuthSlice.actions.setToken({test:"test"}))}

/>

et comme j'appuie sur le bouton ce que je reçois, c'est cette erreur:

Entrez la description de l'image ici

J'ai tout isolé pour être sûr que c'est le problème et rien d'autre.

Pourquoi cette erreur apparaît-elle?

Answer 1

Points pour en savoir plus sur IMMER

1. Si vous retournez autre chose que le brouillon de la fonction de recette, cette valeur de retour remplacera l'état
2. Vous voulez surtout muter le brouillon pour muter l'état, ** Donc, le brouillon de retour après la modification de la modification est facultatif **, le immer retournera le brouillon finalisé de toute façon
3. si vous retournez autre chose de recipe fonction, puis selon le point 1, la nouvelle valeur de retour remplacera l'état
4. Le point 3 est correct, ce n'est que si vous ne modifiez pas le brouillon dans votre fonction de recette. C'est-à-dire que vous pouvez choisir l'un des deux
   une. Modifier le brouillon -> Draft de retour ou non défini, soit OK
   [.____] b. Voulez-vous retourner une nouvelle valeur, puis ne touchez pas le brouillon du tout

---

Maintenant venir répondre à la question. Ceci est votre fonction de réduction

(state, action) => state.token = action.payload.test

Cette fonction fait deux choses,
1. état de modification
[.____] 2. Action de retour.Payload.test

[.____] Cela enfreint le point 4 et donc l'erreur de Immer Bibliothèque

dans ce cas particulier, l'intention n'est que de modifier l'état, nous devons donc annuler le retour existant avec void

setToken: (state, action) => void(state.token = action.payload.test)

Cependant, Immer Bibliothèque recommande l'utilisation du bloc de code pour assurer la cohérence de la base de code importante, ce bloc de code renvoie implicitement indéfini

setToken: (state, action) => { state.token = action.payload.test }