Блог

Мне нужно обновить состояние с помощью react redux. Я могу добавлять, удалять статью по идентификатору, но я занимаюсь реализацией действия РЕДАКТИРОВАНИЯ

Это мой файл-редуктор:

 const initialState = {
    articles : [
        { title: 'Article 1', id: 1, content: 'Description'},
        { title: 'Article 2', id: 2, content: 'Description 2'},
        { title: 'Article 3', id: 3, content: 'Description 3'}
    ]
}
function rootReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_ARTICLE: {
            return { 
                ...state,
                articles: [...state.articles, action.payload]
            } 
        }
        case DELETE_ARTICLE: {
            return { 
                ...state,
                articles:  state.articles.filter(i => i.id !== action.payload) 
            } 
        }
        case EDIT_ARTICLE: {
            const artToEdit = state.articles.find(i => i.id == action.payload) 
            return { 
                ...state,
                articles:  [...state.articles, ]
            } 
        }
    }
    return state
}

export default rootReducer
 

И это компонент, в котором мы можем отображать список статей, редактировать и удалять их

 const List = ({ articles,  deleteArticle}) => {
return(
    <Container>
        <h4 className='mt-5'>List of articles</h4>
        <ul className='list-unstyled mt-5'>
            { articles.map(el => (
                <li className='box' key={el.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div>
                        <h5>{el.title}</h5>
                        <span>{el.content}</span>
                    </div>
                <div>
                <Button variant="primary" onClick={() => editArticle(el.id)} >
                    Delete
                </Button>
                <Button variant="success" onClick={() => deleteArticle(el.id)} className='ml-3'>
                    Edit
                </Button>
                </div>
                </li>
            ))}
        </ul>
        <FormArticle />
    </Container>
)
 

}

 case EDIT_ARTICLE: {
   const artToEdit = state.articles.find(i => i.id == action.payload);
   const articles = [...state.articles];
   articles[artToEdit] = // Here you set the data just like you want
   return { 
     ...state,
     articles
   } 
}
 

Некоторые наблюдения:

1- В вашем примере кнопка удаления отправляет действие редактирования, а кнопка редактирования отправляет действие удаления.

2- Я бы сохранил карту с id -> article вместо array для повышения производительности.