Альтернатива для использования Dispatch hook из react-redux для Class Component в React

Question

Библиотека

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>
}

Это упрощает большую часть кода шаблона для функционального компонента, это есть ли что-то подобное, которое мы можем использовать в компоненте класса?

Answer 1

Компоненты класса должны использовать React-Redux connect API для взаимодействия с хранилищем:

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);

Answer 2

Библиотека

react-redux поставляется с последней useDispatch ловушкой, с помощью которой мы можем напрямую отправлять действия из функционального компонента. Сообщество React в целом, похоже, поощряет этот шаблон прямого диспетчеризации действий из переменной диспетчеризации вместо импорта этих диспетчеров в качестве реквизита в функциональный компонент с помощью mapDispatchToProps Мы можем добиться аналогичной функциональности для компонента класса, импортировав хранилище и отправив действия с его функцией отправки, и это no-brainer, поскольку хук useDispatch внутренне делает то же самое. поэтому в компоненте класса то же самое можно сделать следующим образом Альтернатива перехватчику useDispatch для компонента класса

import React from "react";
import { incrementAction } from "./actions";
import store from "./store";

export class StoreFriend extends React.Component {
  handleStoreIncrement = () => {
    store.dispatch(incrementAction());    // <--- this is the trick. 
  };
  render() {
    return (
      <div>
        <button onClick={this.handleStoreIncrement}>store increment</button>
      </div>
    );
  }
}

Hacky Bonus: узкая альтернатива useSelector для компонента класса Это применимо только в том случае, если компонент знать, когда значение, которое требуется от хранилища redux, будет обновлено См. Хакерское решение ниже

export class StoreFriend extends React.PureComponent {
  
  handleStoreIncrement = () => {
    store.dispatch(incrementAction());
    this.forceUpdate(); // <---This is the hack, everytime class component dispatches the action, it should be forcefully re-rendered to get new value from store
  };
  render() {
    const s = store.getState().value;
    return (
      <div>
        <p>Comp shows store value --> {s}</p>
        <button onClick={this.handleStoreIncrement}>store increment</button>
      </div>
    );
  }
}

ссылка на песочницу кода https://codesandbox.io/s/reactredux-qp05m?file= / Page. js