时间戳

首页 > 解决方案 > React 中类组件的 react-redux 的 useDispatch 钩子的替代方案

javascript - React 中类组件的 react-redux 的 useDispatch 钩子的替代方案

问题描述

react-redux库已经提出useDispatch，它是一个钩子，只能在函数组件中使用。

import React from 'react';
import {useDispatch} from 'react-redux';
import {action} from './actions';

const funComp = () => {
  const dispatch = useDispatch();
  const performAction = () => { dispatch(action()) }
  return <button onClick={performAction}> Dispatch Action </button>
}

这简化了功能组件的许多样板代码，我们可以在类组件中使用类似的东西吗？

标签： javascriptreactjsdesign-patternsredux

解决方案

类组件应该使用React-Redux connectAPI与 store 交互：

import React from 'react';
import {useDispatch} from 'react-redux';
import {action} from './actions';

const mapState = state => {
  return {
    todos: state.todos
  }
};

const mapDispatch = {action};

class MyClassComponent extends React.Component {
  render() {
    const {todos} = this.props; // use to render something
    return <button onClick={this.props.action}> Dispatch Action </button>
  }
}

export default connect(mapState, mapDispatch)(MyClassComponent);

推荐阅读