Reactjs 带有redux组件的故事书

我有一个带redux的MERN堆栈。我正在尝试构建我的UI组件，我想使用storybook简化工作流

问题是我根本无法让它工作

这是我的组件：

Navbar.js

：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

class Navbar extends Component {
  render() {
    const { user } = this.props.auth;
    return (
      <div className="navbar-fixed">
        <nav className="z-depth-0">
          <div className="nav-wrapper white">
            <Link
              to="/"
              style={{
                fontFamily: "monospace"
              }}
              className="col s5 brand-logo center black-text"
            >
              <i className="material-icons">code</i>
              {user.name}
            </Link>
          </div>
        </nav>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  auth: state.auth
});
export default connect(
  mapStateToProps
)(Navbar);

import React from 'react';
import Navbar from '../components/layout/Navbar';

export default {
  title: 'Navbar',
  component: Navbar
};

export const SimpleStory = () => <Navbar/>;

这是我得到的错误：

Could not find "store" in either the context or props of "Connect(Navbar)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Navbar)".

在“连接（导航栏）”的上下文或道具中找不到“存储”。将根组件包装在中，或者将“store”作为道具显式传递给“Connect（Navbar）”。

---

如何使我的Navbar组件与redux隔离？

您的组件似乎使用react-redux，并且它在故事中没有可连接的redux存储，因此使用提供商包装故事可以解决该问题。

从“React”导入React；
从“../components/layout/Navbar”导入导航栏；
从“react redux”导入{Provider}
从“./../src/index”导入{store}”；
导出默认值{
标题：“导航栏”，
组件：导航栏，
装饰师：[
（故事）=>(
),
],
};
导出常量simplestry=（）=>；

没有一条评论。我在别处找不到太多关于它的信息。我一定是做错了什么，我就是说不出是什么。请显示你的App.js/Root组件重复问题。请按照下面的答案回答：你能给出你的答案并解释一下为什么你认为这个解决方案会奏效吗？

import React from 'react';
import Navbar from '../components/layout/Navbar';
import { Provider } from 'react-redux'
import { store } from "../../src/index";

export default {
  title: 'Navbar',
  component: Navbar,
  decorators: [
    (Story) => (
      <Provider store={store}>
        <Story />
      </Provider>
    ),
  ],
};

export const SimpleStory = () => <Navbar/>;