function uniqueReducer(state, action) { switch (action.type) { case 'add': return [...new Set([...state, action.name])]; case 'delete': return state.filter(name => name === action.name); default: throw new Error(); } }
然后，可以通过调用 React 的 useReducer() hook 在产品列表中使用 uniqueReducer()：
function ProductsList() { const [names, dispatch] = useReducer(uniqueReducer, []); const [newName, setNewName] = useState(''); const handleChange = event => setNewName(event.target.value); const handleAdd = () => dispatch({ type: 'add', name: newName }); const map = name => { const delete = () => dispatch({ type: 'delete', name }); return ( <div> {name} <button onClick={delete}>Delete</button> </div> ); } return ( <div className="products"> {names.map(map)} <input type="text" onChange={handleChange} /> <button onClick={handleAdd}>Add</button> </div> ); }
const [names, dispatch] = useReducer(uniqueReducer, []) 启用 uniqueReducer。names 是保存产品名称的状态变量，而 dispatch 是使用操作对象调用的函数。
当单击 Add 按钮时，处理程序将调用 dispatch({ type: 'add', name: newName })。调度一个 add 动作使 reducer uniqueReducer 向状态添加一个新的产品名称。
以同样的方式，当单击 Delete 按钮时，处理程序将调用 dispatch({ type: 'delete', name })。remove 操作将产品名称从名称状态中删除。
有趣的是，reducer 是命令模式的特例。
总结状态变量应只关注一个点。
如果状态具有复杂的更新逻辑，则将该逻辑从组件提取到自定义 hook 中。
同样，如果状态需要多个操作，请用 reducer 合并这些操作。
无论你使用什么规则，状态都应该尽可能地简单和分离。组件不应被状态更新的细节所困扰：它们应该是自定义 hook 或化简器的一部分。
这 3 个简单的规则能够使你的状态逻辑易于理解、维护和测试。
到此这篇关于React状态管理的三个规则的文章就介绍到这了,更多相关React状态管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: