反应 redux- 更新状态

Question

我需要更新用户的帮助state.I 使用名称、电子邮件和密码注册用户。然后在个人资料页面中，我想给机会更新（或创建新的）值，如城市和国家。现在我很困惑。我的 Redux 动作

export const updateUser=(profileId, updatedUser)=>async(dispatch)=>{
try {
    const {data}= await api.updateUser(profileId,updatedUser)
    dispatch({type: UPDATE_USER, payload: data})
} catch (error) {
    console.log(error.message);
}

减速器：

  const initialState = {
users: [
  {
    city: "", country: "", email: "", name: "",
    password: "",
    _id: "",
  },
],
};
const user = (state = initialState, action) => {
switch (action.type) {
  case GET_ONE_USER:
    return {
      ...state,
      users: action.payload,
    };

  case UPDATE_USER:
    return { ...state, users: action.payload };
  default:
    return state;
  }
};

API:

export const updateUser=(profileId, updatedUser)=>API.patch(`/user/${profileId}`, updatedUser)

路线：

router.patch('/:profileId',updateUser)

控制器：

    export const updateUser = async (req,res)=>{
    const {id} = req.params
    const {city, country} = req.body
    const updatedUser={city, country}
    try {
        await User.findByIdAndUpdate(id,updatedUser, {new: true} )
        res.status(200).json(updatedUser)
    } catch (error) {
        res.status(400).json({message: 'Blad'})
    }
}

在我的组件中：

const{ users} = useSelector((state)=>state.users)

并提交处理程序const handleSubmit =(e) =>{ e.preventDefault() dispatch(updateUser(users._id, data)) }

当我单击按钮并发送一个动作时，它只会更改新值，所有其他值都会被删除。我认为这与 reducer 的 return 状态有关？

编辑：好吧，我以某种方式解决了这个问题，虽然我认为我可以简化代码？

 case UPDATE_USER:
    return { ...state, users: {...state.users, city:action.payload.city, country:action.payload.country}};
  default:
    return state;

Answer 1

您正在以错误的方式更新状态。您仅用新的有效负载替换状态。你要做的是你必须保留以前的状态数据，然后添加你正在获得的新有效负载。

switch (action.type) {
  .....
  case UPDATE_USER:
    return { ...state, users: [...state.users, action.payload] };
  default:
    return state;
  }
};

反应 redux- 更新状态

react redux- updating state

reactjs

redux