带有 redux 组件的故事书

Posted 2023-02-19

【中文标题】带有 redux 组件的故事书

【英文标题】：Storybook with redux component

【发布时间】：2020-09-13 20:47:46

【问题描述】：

我有一个带有 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 隔离？

【问题讨论】：

没有一条评论。我在其他地方找不到太多关于它的信息。我一定是做错了什么，我就是不知道是什么。

请出示您的 App.js / 根组件

重复问题。请按照这个答案：***.com/a/58627894/5456476

【参考方案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/>;

【讨论】：

能否请您edit 回答并解释您认为该解决方案为何有效？