Mettre à jour l'objet tableau dans React Redux réducteur

Question

Cela devrait être simple mais je ne trouve pas la réponse simple que je veux. J'ai un réducteur:

const posts = (state = null, action) => { 
    switch(action.type){ 
    case "PUBLISH_POST": 
     return state; 
    case "UNPUBLISH_POST": 
     return state; 
    default: 
     return postList; 
    } 
} 

J'ai une liste des postes avec ID « s et un status. J'envoie mon ID de poste, mais je n'arrive pas à comprendre la logique pour mettre simplement à jour le status de 0 à 1 pour l'article qui a été cliqué. J'ai trouvé beaucoup de demi-solutions mais elles semblent toutes verbeuses et laides - quel est le moyen le plus court/le meilleur de l'atteindre dans ce cas?

données Exemple:

{ 
    id:1, 
    user:"Bob Smith", 
    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ", 
    status:1 
} 

Answer 1

En supposant que votre action est quelque chose comme:

{ 
    type: 'UNPUBLISH_POST', 
    payload: { 
    id: 1, 
    user: 'Bob Smith', 
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ', 
    status: 1 
    } 
} 

Utilisez simplement spread operator pour elle:

const posts = (state = null, action) => { 
    switch(action.type){ 
    case "PUBLISH_POST": 
    case "UNPUBLISH_POST": 
     const index = this.state.findIndex(post => post.id === action.payload.id) 

     return [ 
      ...state.slice(0, index), // everything before current post 
      { 
       ...state[index], 
       status: action.type === 'PUBLISH_POST' ? 1 : 0, 
      }, 
      ...state.slice(index + 1), // everything after current post 
     ] 
    default: 
     return postList; 
    } 
} 

Answer 2

Une solution plus générale, en particulier si l'état contient autres données en plus de votre tableau posts:

const posts = (state = null, action) => { 
    const post = state.posts.find(p => p.id === action.payload.id); 
    switch(action.type) { 
    case "PUBLISH_POST": 
     return { ...state, posts: [ ...state.posts.filter(p => p === post), { ...post, status: 1 } ] }; 
    case "UNPUBLISH_POST": 
     return { ...state, posts: [ ...state.posts.filter(p => p === post), { ...post, status: 0 } ] }; 
    default: 
     return state; 
    } 
}