如何在React自定义Hook中获取Redux Store实例以派发Action？

你猜得完全正确！useContext确实能帮你拿到Redux的Store实例，不过Redux官方已经给我们封装了更简洁的钩子，我来给你演示两种可行的实现方式：

方案一：直接利用Redux的Context #

Redux的<Provider>组件本质是基于React Context实现的，我们可以直接从react-redux包中导入它内部的ReactReduxContext来获取Store：

import { useContext, useState } from 'react';
// 导入Redux内置的Context
import { ReactReduxContext } from 'react-redux';

export const useValueInput = (oletusArvo) => {
  const [value, asetaValue] = useState(oletusArvo);
  // 通过useContext取出store实例
  const { store } = useContext(ReactReduxContext);

  const onChange = ({target}) => {
    asetaValue(target.value);
    // 现在可以直接用store.dispatch派发Action了
    store.dispatch({ type: 'UPDATE_INPUT_VALUE', payload: target.value });
  }

  return [ value, asetaValue, { value, onChange } ];
}

这种方式直接拿到了完整的Store实例，你不仅可以调用dispatch，还能通过store.getState()获取当前的全局状态。

方案二：官方推荐的useDispatch钩子 #

其实react-redux已经提供了专门用于获取dispatch函数的钩子useDispatch，用起来比直接操作Context更简洁，也更符合Redux的最佳实践：

import { useState } from 'react';
// 导入useDispatch钩子
import { useDispatch } from 'react-redux';

export const useValueInput = (oletusArvo) => {
  const [value, asetaValue] = useState(oletusArvo);
  // 直接获取dispatch函数
  const dispatch = useDispatch();

  const onChange = ({target}) => {
    asetaValue(target.value);
    // 直接使用dispatch派发你的Action
    dispatch({ type: 'UPDATE_INPUT_VALUE', payload: target.value });
  }

  return [ value, asetaValue, { value, onChange } ];
}

如果之后你还需要从Store中读取状态，可以搭配useSelector钩子使用，比如：

import { useDispatch, useSelector } from 'react-redux';

// 在hook内部获取某个状态
const currentUser = useSelector(state => state.user);

这样就完全不需要直接接触Store实例，Redux会帮你处理好上下文的传递~

内容的提问来源于stack exchange，提问作者Tuomas Toivonen