替代使用 react-redux 的调度钩子，用于 React 中的 Class 组件

Question

react-redux library has come up with useDispatch , which being a hook can only be used in function component.

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

This simplifies a lot of boiler-plate code for functional component, is there something similar which we can use in class component?

Answer 1

react-redux library came with latest useDispatch hook using which we can directly dispatch actions from a functional component

react community as a whole seems to encourage this pattern of directly dispatching actions from dispatch variable instead of importing those dispatchers as props on the function component, with the help of mapDispatchToProps

We can achieve similar functionality for class component by importing the store and dispatching actions with its dispatch function, and it's no-brainer since useDispatch hook internally does the same thing.

so in a class component same can be achieved like this

An alternative to useDispatch hook for class component

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: narrow use case alternative of useSelector for class component This is only applicable in case the component is aware when the value it requires from redux store is going to update

See the hacky solution below

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

code sandbox link https://codesandbox.io/s/reactredux-qp05m?file=/Page.js

Answer 2

Class components should use the React-Redux connect API to interact with the 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);