javascript - 使用 React hook 获取 Redux store 实例

Question

我需要在 React 自定义 Hook 内分派(dispatch) Redux 操作。如何获取存储实例以在函数内调度操作？我想 useContext 应该可以解决问题，但我不确定如何实际使用它。以下是代码示例

export const useValueInput = (oletusArvo) => {

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

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

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

在层次结构的上部，我定义了商店提供程序，如下

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

Answer 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 中