如何使用react redux实现addItem

我已经实现了用户列表，可以删除用户调度操作deleteUser((。现在我添加了用户，但一旦我单击添加按钮，数据就不会映射到列表中。这是一个减速器：

case ADD_USERS:
const newId = state.users[state.users.length-1] + 1
return {
...state,
users: [
...state.users,
{
id: newId,
name: action.payload
}
],
loading: false

}

初始状态由2个对象和加载键组成。动作功能很简单：

export function addUser (name) {
return {
type: ADD_USERS,
payload: name
}

组件就在那里：

const mapStateToProps = (state) => ({ users: state.users });
const mapDispatchToProps = (dispatch) => {
return {
deleteUser: id => {
dispatch(deleteUser(id))
},
addUser: name => {
dispatch(addUsers(name))
}
}

};

const Users = (props) => {
const { users } = props.users;

useEffect(() => {
getUsers();
}, []);
return (
<>
<input type='text' placeholder='name..'/>
<button onClick={() => props.addUser(name)}>add</button>
<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>
);
})}
</>
);
};
}

我认为getUsers不起作用，或者我可能错了。因为我将状态映射到道具并显示

{user.name}内的数据

我认为它应该和getUsers((一样工作

const { users } = props.users;

<button onClick={() => props.addUser(name)}>add</button>

const [name, setName] = useState("");
return (
<>
<input
type="text"
placeholder="name.."
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button onClick={() => props.addUser(name)}>add</button>
...