如何使用redux更新状态

Question

我需要使用react redux更新状态。我可以通过ID添加、删除文章，但我需要实现EDIT操作

这是我的reducer文件：

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>
)

}

Answer 1

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为->文章而不是数组来提高性能。