Я создал список пользователей с помощью действия getUsers () и теперь хочу удалить любого пользователя. поэтому я создал действие:
export function deleteUser(id) {
return {
type: DELETE_USER,
payload: id
};
}
настроить редуктор:
case DELETE_USER :
return {
...state,
users: state.users.filter(i => i.id !== action.id)
}
initialState это:
const initialState = {
users: [
{
id: 1,
name: 'Oksana'
},
{
id: 2,
name: 'Serge'
},
],
loading: true
}
и теперь пора отправить deleteUser ()
это мой компонент "Пользователи":
const mapStateToProps = (state) => ({ users: state.users });
const mapDispatchToProps = (dispatch) => {
return {
deleteUser: id => {
dispatch(deleteUser(id))
}
}
};
const Users = (props) => {
const { users } = props.users;
console.info(props);
useEffect(() => {
getUsers();
}, []);
return (
<>
<h2>Users</h2>
{users.map((user) => {
return (
<div className = "d-flex justify-content-between align-items-center mb-1">
<li>{user.name}</li>
<button onClick = {() => props.deleteUser(user.id)}>x</button>
</div>
);
})}
</>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(Users);
Я пытался переписать mapDispatchToProps, но это не работает. Я нажимаю кнопку удаления (x), и она ведет себя тупо. нет ошибок на терминале.
верный ! Благодарность !:)
Вы должны написать
action.payload
, то естьusers: state.users.filter(i => i.id !== action.payload)