Redux réducteur avec object.assign crée une clé à l'intérieur d'une clé du même nom

Question

J'essaie de passer de l'exemple simple que j'ai appris sur Medium à propos de Redux pour modifier correctement l'état immuable avec object.assign ou l'opérateur spread . Cependant, après avoir essayé cela, il crée une clé dans la clé d'état d'origine avec le même nom. F.e. J'avais une clé d'état searchPage: 1 et après avoir converti le réducteur j'ai searchPage: {searchPage: 1}. Je parie que c'est idiot, mais je l'ai fait selon les docs de Redux (je suppose seulement). J'ai essayé object.assign et l'opérateur spread, qui ont les mêmes résultats. Voici mon ancien réducteur:

export function searchPage(state = 1, action) { 
    switch (action.type) { 
    case 'SET_SEARCH_PAGE': 
     return action.searchPage 

    default: 
     return state 
    } 
} 

et le nouveau avec l'opérateur de diffusion:

export function searchPage(state = 1, action) { 
    switch (action.type) { 
    case 'SET_SEARCH_PAGE': 
     return { ...state, searchPage: action.searchPage } 

    default: 
     return state 
    } 
} 

mise à jour Maintenant, j'utilise un objet initialState pour définir l'état initial pour tous les réducteurs à un objet par défaut. Cependant, la syntaxe de l'opérateur de propagation fait exactement la même chose qu'avant, c'est-à-dire qu'elle insère la clé d'état initiale dans la clé searchPage, donc je me retrouve avec un objet dans ma clé searchPage au lieu d'un nombre. Voici le code mis à jour, je ne sais pas si je vais dans la bonne direction:

const initialState = { 
    posts: [], 
    postsHasErrored: false, 
    postsIsLoading: false, 
    searchString: '', 
    searchCategories: [], 
    searchPage: 10 
} 

export function searchString(state = initialState.searchString, action) { 
    console.log(state) 
    switch (action.type) { 
    case 'SET_SEARCH_STRING': 
     return action.searchString 

    default: 
     return state 
    } 
} 

export function searchCategories(state = initialState.searchCategories, action) { 
    switch (action.type) { 
    case 'SET_SEARCH_CATEGORIES': 
     return action.searchCategories 

    default: 
     return state 
    } 
} 

export function searchPage(state = initialState.searchPage, action) { 
    switch (action.type) { 
    case 'SET_SEARCH_PAGE': 
     return { ...state, searchPage: action.searchPage } 

    default: 
     return state 
    } 
} 

Answer 1

Cela dépend de ce que votre valeur action.searchPage. Je pense que c'est un objet. Une fois passer au débogage pour l'objet action.

essayer comme ça

export function searchPage(state = {}, action) { 
    switch (action.type) { 
    case 'SET_SEARCH_PAGE': 
     return { ...state, searchPage: action.searchPage }; 

    default: 
     return state 
    } 
}