javascript-React钩子：从useEffect调度动作

我的文件夹结构：

|--App
  |--Components
    |--PageA.js
    |--PageB.js
    |--PageC.js
  |--common-effects
    |--useFetching.js

我正在使用React hooks重构代码以从API提取数据.
我想调度由saga中间件截获的useFetching.js中的useEffect操作.仅当安装了组件(PageA,PageB,PageC)时,才应调度该动作.

我正在使用redux,react-redux和redux-saga.

PageA.js：

function(props) {
  useFetching(actionParams)
  //....//
}

PageB和PageC组件的类似代码.

我已经对可重用代码进行了抽象,以获取useFetching Custom挂钩中的数据.

useFetching.js

const useFetching = actionArgs => {
  useEffect( () => {
    store.dispatch(action(actionArgs)); // does not work
  })
}

我不知道如何在useFetching中访问redux调度.我尝试了useReducer效果,但sagas错过了动作.

解决方法:

您将需要传递绑定动作创建者或引用以将其调度到您的钩子.这些将来自连接的组件,与通常使用React-Redux的相同：

function MyComponent(props) {
    useFetching(props.fetchSomething);

    return <div>Doing some fetching!</div>
}

const mapDispatch = {
    fetchSomething
};

export default connect(null, mapDispatch)(MyComponent);

然后,该挂钩应调用效果中的绑定动作创建者,后者将相应地分派动作.

另外,请注意,您的当前挂钩将在每次重新渲染组件时重新运行效果,而不仅仅是第一次.您需要像这样修改钩子：

const useFetching = someFetchActionCreator => {
  useEffect( () => {
    someFetchActionCreator();
  }, [])
}

标签：redux-saga,reactjs,redux,javascript
来源： https://codeday.me/bug/20191024/1923064.html