使用 React hook 获取 Redux 存储实例答案

【问题标题】：Obtaining Redux store instance with React hook使用 React hook 获取 Redux 存储实例
【发布时间】：2020-01-10 23:58:28
【问题描述】：

我需要在 React 自定义钩子中调度 Redux 操作。如何获取 store 实例以在函数内调度操作？我想useContext 应该可以解决问题，但我不确定如何实际使用它。以下是代码示例

export const useValueInput = (oletusArvo) => {

    const [value, asetaValue] = useState(oletusArvo)
    const [store] = useContext(???)

    const onChange = ({target}) => {
        asetaValue(target.value)
    }

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

在层次结构的上层，我定义了 store provider 如下

render() {
    return (
      <div>
        <Provider store={store}>
          <ComponentRouter />
        </Provider>
      </div>
    )
  }

【问题讨论】：

如果你使用 react-redux，他们提供了一个 useStore 和一个 useDispatch 钩子。 react-redux.js.org/next/api/hooks#usedispatch

标签： javascript reactjs redux react-hooks

【解决方案1】：

你可以使用react-redux的Hooks

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

export const ComponentRouter = (props) => {
    // get dispatch function for later use
    const dispatch = useDispatch();
    // get value from the store
    const oldValue = useSelector(state => state.prop.innerProp.value);

    const onChange = ({target}) => {
        dispatch({
            type: SOMETHING_CHANGED,
            value: target.value,
        });
    }

    return <select value={value}>{options.map(....)</select>
};

PS：然后你将组件包装在 Store Provider 中

【讨论】：