reactjs - 带有 redux 组件的故事书

Question

我有一个带有 redux 的 MERN 堆栈。我正在尝试构建我的 UI 组件，并且我想使用故事书来简化工作流程。

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

这是我的组件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);

这是我的故事Navbar.stories.js：

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)".

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

标签： reactjsreduxreact-reduxstorybook

Answer 1

您的组件似乎使用了 react-redux，并且在故事中没有可连接的 Redux 存储，因此使用提供者包装故事可以解决该问题。 https://www.learnstorybook.com/intro-to-storybook/react/en/screen/

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/>;