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>
  );
};