如何使用组件中的Redux-hooks useDispatch在动作中使用API​​调用来调用函数？

Question

我正在使用redux-hooks做一个项目，我是redux-hooks的新手。我有具有不同API调用功能的actions.js文件。并使用useDispatch（）从组件分派操作。我必须将action.js中的每个函数导入我的不同组件以分派动作吗？或有什么方法吗？预先感谢

Answer 1

在react-redux将钩子合并到它们的库中之前，通常将redux的部分拆分成自己的容器文件。在那里，您将映射动作并声明所需的道具，并将其传递给组件。例如，容器和组件看起来像这样。

容器Example.js：

// Node Modules
import {connect} from 'react-redux';

// Actions
import {action1, action2} from '../actions';

// Components
import ExampleComponent from './ExampleComponent';

// Actions
const mapDispatchToProps = (dispatch) => ({
  action1: () => dispatch(action1()),
  action2: () => dispatch(action2()),
});

// State
const mapStateToProps = (state) => ({
  state1: state.example.state1,
  state2: state.example.state2,
});

export const Example = connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);

组件ExampleComponent.jsx：

// Node Modules
import React from 'react';

const Example = (props) => (
  <div>
    <label>{props.state1}</label>
    <label>{props.state1}</label>
    <button onClick={props.action1}>Action 1</button>
    <button onClick={props.action2}>Action 2</button>
  </div>
);

export default Example;

尽管您可以将容器元素和组件元素一起写在一个文件中，但这仅是在React中如何使用Redux的一个示例。通过在react-redux中引入钩子，您现在可以通过其提供的钩子访问Redux存储。

组件ExampleComponent.jsx：

// Node Modules
import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

// Actions
import {action1, action2} from '../actions';

const Example = (props) => {
  // Dispatch
  const dispatch = useDispatch();

  // Redux State
  const state1 = useSelector((state) => state.example.state1);
  const state2 = useSelector((state) => state.example.state2);
  return (
    <div>
      <label>{state1}</label>
      <label>{state1}</label>
      <button onClick={() => dispatch(action1())}>Action 1</button>
      <button onClick={() => dispatch(action2())}>Action 2</button>
    </div>
  );
};
export default Example;

使用此方法，您可以直接从ExampleComponent.jsx文件导入组件，而不必通过容器导入。对于您的操作，您只需导入需要用于组件的内容，并用dispatch提供的react-redux钩子将其包装。