如何使用typescript、next redux包装器、getServerSideProps？

你好，我想要javascript->typescript！但是，太难了

救命啊

// store.js

import { applyMiddleware, createStore, compose, Store } from "redux";
import createSagaMiddleware, { Task } from "redux-saga";
import { createWrapper } from "next-redux-wrapper";
import { composeWithDevTools } from "redux-devtools-extension";

import reducer from "./reducers";
import rootSaga from "./sagas";


const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const enhancer =
    process.env.NODE_ENV === "production"
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));
  const store = createStore(reducer, enhancer);
  store.sagaTask = sagaMiddleware.run(rootSaga);
  return store;
};

const wrapper = createWrapper(configureStore, {
  debug: process.env.NODE_ENV === "development",
});

export default wrapper;

我看到了官方文件，但我不明白。 [https://github.com/kirill-konshin/next-redux-wrappergetserversideprops]

这些代码在JavaScript中没有问题。 但是类型脚本有一个问题

我的英语不好。对不起

所以我们需要简单的代码，简单的描述

---

谢谢。

以下是我看到的问题：

您将在createStorereducer、enhancer中获得一个错误，因为您的reducer不适合类型state:state | undefined，action:AnyAction=>state。你必须使你的减速器适合这种类型。现在的问题是，减速器不允许状态未定义。 改变

const rootReducer = (state: State, action: AnyAction) => {

到

您将在store.sagaTask=sagaMiddleware.runrootSaga；因为redux创建的store对象没有名为sagaTask的属性。关于这一点还有另一个讨论。 下面是一个基于下一个redux包装文档的解决方案：

为您的商店定义一个包含任务的新界面

export interface SagaStore extends Store<State, AnyAction> {
  sagaTask: Task;
}

与

替换

store.sagaTask = sagaMiddleware.run(rootSaga);

await context.store.sagaTask.toPromise();

与

---

在尝试以适当的方式将Redux与Next同步时，我也遇到了一些麻烦。在使用nextredux包装器时，我创建了一个项目的模板，该模板目前正在工作，并遵循nextredux包装器的指导原则。你可以看看：

基本上，我创建了如下包装：

const thunkMiddleware = thunk.withExtraArgument({}) as ThunkMiddleware<IStoreState, AnyAction>;

// create a makeStore function
// This makeStore is needed for the wrapper, for every new page that is called, a new store with the current values will be created
const makeStore: MakeStore<IStoreState> = (context: Context) => createStore(reducers, composeWithDevTools(applyMiddleware(thunkMiddleware)));

export type ExtraArgument = {};

export type ThunkCreator<R = Promise<any>> = ActionCreator<ThunkAction<R, IStoreState, ExtraArgument, AnyAction>>;

// export an assembled wrapper
// this wrapper will be used to every page's component, for injecting the store and actions into it.
const wrapper = createWrapper<IStoreState>(makeStore, {debug: false});

export default wrapper;

然后覆盖了_app.tsx：

// For default you don't need to edit _app.tsx, but if you want to wrapper the pages with redux wrapper, you need
// to override _app.tsx with this code bellow
class MyApp extends App {
    // @ts-ignore
    static async getInitialProps({Component, ctx}) {
        return {
            pageProps: {
                // Call page-level getInitialProps
                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
            }
        };
    }

    render() {
        const {Component, pageProps} = this.props;
        return (
            <Component {...pageProps} />
        );
    }

}

export default wrapper.withRedux(MyApp);

最后注入index.tsx组件：

接口IProps{ 勾选：ITickState 更新通知：有吗 } 界面IState{} 接口IDispatchProps{ onUpdateTick:message:string=>ITickState， thunkAsyncFunction:=>承诺； } 类型Props=IProps&IState&IDispatchProps 类应用程序扩展了React.Component{ 构造器支柱：支柱{ 超级作物； } 异步组件将卸载：承诺{ 等待this.props.thunkancync函数； } 渲染{ 回来

---

Hello Next.js您正在尝试解决的具体问题是什么？您可以链接到完整项目的演示或回购吗？哦，我的天哪！非常感谢！！我解决了这个问题。不确定为什么Redux Saga不为此提供默认的TypeScript类型。+1。

(store as SagaStore).sagaTask = sagaMiddleware.run(rootSaga);

await context.store.sagaTask.toPromise();

await (context.store as SagaStore).sagaTask.toPromise();

const thunkMiddleware = thunk.withExtraArgument({}) as ThunkMiddleware<IStoreState, AnyAction>;

// create a makeStore function
// This makeStore is needed for the wrapper, for every new page that is called, a new store with the current values will be created
const makeStore: MakeStore<IStoreState> = (context: Context) => createStore(reducers, composeWithDevTools(applyMiddleware(thunkMiddleware)));

export type ExtraArgument = {};

export type ThunkCreator<R = Promise<any>> = ActionCreator<ThunkAction<R, IStoreState, ExtraArgument, AnyAction>>;

// export an assembled wrapper
// this wrapper will be used to every page's component, for injecting the store and actions into it.
const wrapper = createWrapper<IStoreState>(makeStore, {debug: false});

export default wrapper;

// For default you don't need to edit _app.tsx, but if you want to wrapper the pages with redux wrapper, you need
// to override _app.tsx with this code bellow
class MyApp extends App {
    // @ts-ignore
    static async getInitialProps({Component, ctx}) {
        return {
            pageProps: {
                // Call page-level getInitialProps
                ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
            }
        };
    }

    render() {
        const {Component, pageProps} = this.props;
        return (
            <Component {...pageProps} />
        );
    }

}

export default wrapper.withRedux(MyApp);