Javascript _app.js类组件Next.js中的上下文API分派（使用者）

我需要在

\u app.js

中使用分派上下文API方法。 主要的限制是我将React钩子与上下文API一起使用，因为

\u app.js

是一个

类

，所以我不能在其中使用钩子

我的代码：

// store.js

import React, { createContext, useContext, useReducer } from "react";
import mainReducer from "../store/reducers";

const AppStateContext = createContext();
const AppDispatchContext = createContext();
const initialState = {
    filters: {
        diet: {
            selected: []
        }
    }
};

const useAppState = () => useContext(AppStateContext);
const useAppDispatch = () => useContext(AppDispatchContext);
const useApp = () => [useAppState(), useAppDispatch()];

const AppProvider = ({ children }) => {
    const [state, dispatch] = useReducer(mainReducer, initialState);

    return (
        <AppStateContext.Provider value={state}>
            <AppDispatchContext.Provider value={dispatch}>
                {children}
            </AppDispatchContext.Provider>
        </AppStateContext.Provider>
    );
};

export { AppProvider, useAppState, useAppDispatch, useApp };

//store.js
从“React”导入React，{createContext，useContext，useReducer}；
从“./存储/减速器”导入主减速器；
const AppStateContext=createContext（）；
const AppDispatchContext=createContext（）；
常量初始状态={
过滤器：{
饮食：{
选定：[]
}
}
};
const useAppState=（）=>useContext（AppStateContext）；
const useAppDispatch=（）=>useContext（AppDispatchContext）；
const useApp=（）=>[useAppState（），useAppDispatch（）]；
const AppProvider=（{children}）=>{
const[state，dispatch]=useReducer（mainReducer，initialState）；
返回(
{儿童}
);
};
导出{AppProvider，useAppState，useAppDispatch，useApp}；

/\u app.js
从“下一个/应用程序”导入应用程序；
从“React”导入React；
从“./store”导入{AppProvider}；
类MyApp扩展了应用程序{
componentDidMount（）{
/***********************************/
//这里我想用调度
/***********************************/
}
render（）{
const{Component，router，pageProps}=this.props；
返回(
);
}
}
导出默认MyApp；

如果您真的想使用钩子，那么只需在app.js周围放置一个包装，如下所示：

import React from 'react'
import App from 'next/app'

function MyComponent({ children }) {
  // You can use hooks here
  return <>{children}</>
}

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <MyComponent>
        <Component {...pageProps} />
      </MyComponent>
    )
  }
}

export default MyApp

从“React”导入React
从“下一个/应用程序”导入应用程序
函数MyComponent（{children}）{
//你可以在这里用钩子
返回{children}
}
类MyApp扩展了应用程序{
render（）{
const{Component，pageProps}=this.props
返回(
)
}
}
导出默认MyApp

你是我的救世主，谢谢你！这是一个简单而直接的解决方案，我应该早点想到这一点。工作起来很有魅力！对于那些没有遵循的人，这是一种在NextJS_app.js中使用上下文的方法，即在组件金字塔的顶部。

import React from 'react'
import App from 'next/app'

function MyComponent({ children }) {
  // You can use hooks here
  return <>{children}</>
}

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <MyComponent>
        <Component {...pageProps} />
      </MyComponent>
    )
  }
}

export default MyApp