useDispatch
选择器只是能够从Store中选出所需要使用的部分State,或者是利用上一节中介绍的复杂选择器构建方法对State进行派生。但是在几乎所有的应用中,除了需要选取State并进行展示以外,更重要的是要进行State的变更操作。
在传统Redux中,要想变更State中保存的内容,必须要使用Store提供的dispatch
方法触发一个Action。但是在目前使用Provider
以Context方式提供Store的使用Hooks访问和操作State的情况下,从Store中获取dispatch
方法变得更加简单了。
React Redux库提供的useDispatch
这个Hook可以提供组件从Store上下文中获取dispatch
函数的功能。所以在使用的时候,只需要搭配从State片段中导出的Action生成函数以及额外定义的异步Action,就可以非常方便的更改Store中保存的内容了。
以下是一个结合选择器输出State,并进行State修改的简单综合示例。
import { useDispatch, useSelector } from 'react-redux';
import { decreaseBy1, increaseBy1 } from './counter_state';
export const CounterComponent = () => {
const counter = useSelector(state => state.counter);
const dispatch = useDispatch();
return (
<div>
<div>当前计数:{counter}</div>
<button onClick={() => dispatch(increaseBy1())}>加1</button>
<button onClick={() => dispatch(decreaseBy1())}>减1</button>
</div>
);
};