Question

我正在使用称为mdx-deck的超酷库制作网络幻灯片。我已经为幻灯片组编写了自己的React组件。现在，我想将react-redux添加到幻灯片中，以便所有组件共享一个公用存储。我该怎么办？

我知道我应该使用<Provider />中的react-redux组件，所以我一直在阅读有关mdx-deck custom provider和MDXProvider的信息，但是我一直看不到我的DOM中的<Provider />。

我正在使用yarn start服务我的幻灯片：

// package.json
{
  "scripts": {
    "start": "mdx-deck concat-slides.js",
  }
}

concat-slides.js脚本连接了我拥有的两个幻灯片：

// concat-slides.js
import { slides as cv } from 'src/slides/cv.mdx';
import { slides as bootstrap } from 'src/slides/bootstrap.mdx';
import { distillLite } from 'src/slides/theme/index';

export const themes = [distillLite];
export const slides = [...cv, ...bootstrap]

这是我尝试添加自定义提供程序的尝试（但是我在DOM树中看不到提供程序吗？）：

// src/slides/theme/index.tsx

import React from 'react'
import { createStore } from "redux";
import { Provider as ReduxProvider } from "react-redux";

export const store = createStore(() => {});

const Provider = (props:any) => (
  <ReduxProvider store={store}>
    {props.children}
  </ReduxProvider>
)

export const distillLite = {
  Provider,
}

如何在React-Redux中使用mdx-deck？

0 个答案: