如何在Storybook中使用redux-toolkit？

Question

我目前正在尝试用Storybook设置redux-toolkit。然而，当在storybook中查看我的组件时，我的选择器返回undefined。当我将我的应用程序作为一个普通的React应用程序运行时，选择器返回适当的状态。

我如何使用Redux设置Storybook，以便我的选择器从存储中实际返回预期的状态？

这是我的故事书故事：

import { Meta, Story } from "@storybook/react"
import ContactInfo from "./ContactInfo"
import { Provider } from "react-redux"
import { store } from "../../../store/config/configureStore"

export default {
  title: "Forms/ContactInfo",
  component: ContactInfo,
  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
} as Meta

export const Template: Story<{}> = (args) => <ContactInfo {...args} />

这是我的商店配置

import { configureStore } from "@reduxjs/toolkit"
import { useDispatch } from "react-redux"
import { logger } from "../middleware/logger"
import rootReducer from "./reducer"

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }).concat(logger),
})

export { store }

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>()

export type RootState = ReturnType<typeof rootReducer>

export interface GetState {
  getState: () => RootState
}

这是我的带有选择器的组件

import React from "react"
import { useSelector } from "react-redux"
import { useAppDispatch } from "../../../store/config/configureStore"
import {
  selectContactInfo,
  updateContactInfo,
} from "../../../store/contactInfo"
import Social from "../../components/social/Social"
import TextField from "../../components/textField/TextField"

export default function ContactInfo() {
  const dispatch = useAppDispatch()
  const contactInfo = useSelector(selectContactInfo)

  console.log("printing contactInfo", contactInfo)

  const handleChange = (event: any) => {
    const target = event.target

    const updatedContactInfo = { ...contactInfo, [target.name]: target.value }
    dispatch(updateContactInfo(updatedContactInfo))
  }

  const handleSubmit = (event: React.SyntheticEvent) => {
    console.log("User submitted contact info section: ", contactInfo, "yo")
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Enter Your Contact Information</h2>
      <TextField
        label="First Name"
        value={contactInfo.firstName}
        onChange={handleChange}
      />

      <TextField
        label="Last Name"
        value={contactInfo.lastName}
        onChange={handleChange}
      />

      <TextField
        label="Middle Initial"
        value={contactInfo.middleInitial}
        onChange={handleChange}
        required={false}
        maxLength={1}
      />

      <TextField
        label="Email Address"
        type="email"
        value={contactInfo.emailAddress}
        onChange={handleChange}
      />

      <Social socialLinks={contactInfo.socialLinks} />

      <TextField
        label="Phone Number"
        type="tel"
        value={contactInfo.phoneNumber}
        onChange={handleChange}
      />

      <button
        type="button"
        onClick={() => console.log("User wants to go back.")}
      >
        Back
      </button>
      <button type="submit">Next</button>
    </form>
  )
}

Answer 1

要解决此问题，请在.storybook/preview.js文件中添加全局装饰器：

import { Provider } from "react-redux"
import { store } from "../src/store/config/configureStore"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

export const decorators = [
  (Story) => (
    <Provider store={store}>
      <Story />
    </Provider>
  ),
]

更新26-11-2021

实际上，通过.storybook/preview.js添加提供程序(或模拟提供程序)是一个很好的做法

As showed in the storybook's screen tutorial

Answer 2

如上所述，您可以通过提供者将redux store连接到Story组件。但实际上，这种方法是错误的。

为设计组件而创建的Storybook，隔离地构建您的UI(如其主页所述)。不是为了测试商店交互。逻辑和从存储接收数据应该分开放置。当您想要在应用程序外部呈现组件时，Storybook非常有用。要测试与Store的交互-只需在应用程序中使用react脚本或npm脚本运行它。

如果你问这个问题--可能是你的应用程序设计得很糟糕。我会转而考虑重构。