如何使用useReducer代替useState?

问题描述 投票:0回答:1

嗨,我的初始状态为空对象,

let [value,setValue] = useState({});

function onSubmit(){
  setValue({"new Object"})
}

并在单击按钮后提交时更新。有什么方法可以在useReducer中实现此方案,并且在这里我想创建一个新状态,而不是对其进行更改。非常感谢您的帮助或建议。

reactjs react-hooks
1个回答
0
投票

reducer使用的useReducer是用当前状态调用的函数,以及用来更改状态的动作。该动作可以是您想要的任何东西。

您可以通过从化简器返回新状态(动作)来轻松地用useState创建useReducer

const reducer = (_, newState) => newState;

const [value, setValue] = useState(reducer, {});

function onSubmit(){
  setValue({"new Object"})
}

但是,如果您只需要替换当前状态,则useState就足够了。但是,如果要通过替换添加到当前状态,则useReducer是一个不错的选择:

const reducer = (state, newState) => { ...state, ...newState };

const [value, setValue] = useState(reducer, { a: 1 });

function onSubmit(){
  setValue({ b: 2 })
}

通过减速器后的状态为{ a: 1, b: 2 }

经典方法是传递带有类型和有效负载的动作。然后,根据类型,reducer可以“决定”如何处理有效负载以及当前状态以生成新状态。参见useReducer api documentation

© www.soinside.com 2019 - 2024. All rights reserved.