使用上下文api和HOC不会为不同组件更新状态

Question

I'm trying to update the state of the application using the context api since I don't need all of the features of redux and I don't want to deal with prop drilling. So with typescript I made a global context and a HOC wrapper that wraps the component so the component class can have access to the context.

import * as React from 'react';

import GlobalConsumer from './globalConsumer';
import GlobalProvider from './globalProvider';
import IGlobalState from './globalState';

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
type Subtract<T, K> = Omit<T, keyof K>;

export interface IInjectWithState {
  globalState: IGlobalState;
}

const withState = <P extends IInjectWithState>(
  Component: React.ComponentType<P>
): React.ComponentType<Subtract<P, IInjectWithState>> =>
  class WithState extends React.Component<Subtract<P, IInjectWithState>> {
    public render(): JSX.Element {
      return (
        <GlobalProvider>
          <GlobalConsumer>
            {state => <Component {...this.props} globalState={state} />}
          </GlobalConsumer>
        </GlobalProvider>
      );
    }
  };

export default withState;

This is the HOC.

import * as React from 'react';

import reducer from './reducer';

import IGlobalState from './globalState';

import GlobalContext, { initState } from './globalContext';

class GlobalProvider extends React.Component<{}, IGlobalState> {
  constructor(props: any) {
    super(props);
    this.state = {
      ...initState,
      dispatch: (action: object) =>
        this.setState(() => {
          return reducer(this.state, action);
        })
    };
  }

  public render(): JSX.Element {
    return (
      <GlobalContext.Provider value={this.state}>
        {this.props.children}
      </GlobalContext.Provider>
    );
  }
}

export default GlobalProvider;

This is the provider.

Most classes are wrapped in the HOC, but whenever I call dispatch and change the state in one of the component classes, the global state doesn't update in the other component classes.

  RootView.tsx:35 
{appBarTitle: "Welcome", canContinue: true, currentPage: Array(0), dispatch: ƒ, nextPage: Array(0), …}
    ContinueButton.tsx:31 
{appBarTitle: "Welcome", canContinue: true, currentPage: Array(0), dispatch: ƒ, nextPage: Array(0), …}
    RootView.tsx:39 
{appBarTitle: "Welcome", canContinue: true, currentPage: Array(1), dispatch: ƒ, nextPage: Array(1), …}
    Start.tsx:21 
{appBarTitle: "Welcome", canContinue: true, currentPage: Array(0), dispatch: ƒ, nextPage: Array(0), …}
    ContinueButton.tsx:35 
{appBarTitle: "Welcome", canContinue: true, currentPage: Array(0), dispatch: ƒ, nextPage: Array(0), …}

The component is updated after calling dispatch in the root view, but after updating the state in another class, it doesn't update in the others.

Answer 1

The way you have it set up now, each instance of a component that uses the HOC has its own GlobalProvider instance and thus its own independent "global" state. Try removing GlobalProvider from the HOC and instead adding a single GlobalProvider component at the outermost level of your component tree.