代码之家 › 专栏 › 技术社区 › Tuomas Toivonen

使用react钩子获取redux存储实例

react-hooks redux reactjs javascript

Tuomas Toivonen · 技术社区 · 5 年前

我需要在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
        }
    ]
}

在层次结构的上部,我定义了存储提供程序,如下所示

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

1 回复 | 直到 5 年前

Teneff 5 年前

你可以用 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:然后将组件包装到存储提供程序中

推荐文章

Jonas · 反应挂钩-编辑后更新列表中的项目

2 年前

Selcukusu · 为什么在show-axios-react之后无法清除错误消息

2 年前

swamp blues · 如何从自定义挂钩收集和返回多个函数

2 年前

Daniel · 钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

2 年前

Ben_Sven_Ten · 使用自定义IntersectionObserver钩子响应钩子/穷举deps警告

2 年前

FettFrank · 测量渲染React组件的时间

2 年前

ManP22 · 我想在同一次单击中调用两个常量

2 年前

Dhruv B. · 为什么{text.length}在react中不起作用。js代码。我想要更改状态文本的长度。请帮帮我

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

David · 如何多次使用fetch-get响应?

2 年前