如何为 react-redux 编写故事书？

Question

我正在用 React 写故事书，但是使用 redux 的组件给我错误？有人可以帮忙写故事书吗？

组件：

 import React from 'react'
import { useDispatch } from 'react-redux'
import { otaRequestItemChange } from '../../../../../common/utils/Redux/Actions/actions'
import { goToPage } from '../../../../utils'

export default function RequestId(props) {
  const { data, history, requestId } = props
  const otaDetailsUrl = '/dashboard/ota/ota-details'
  const dispatch = useDispatch()

  const onOTARequestItemClick = (id, data) => {
    const item = data.find((request) => request.id === id)
    dispatch(otaRequestItemChange(item))
    goToPage(history, otaDetailsUrl)
  }

  return (
    <span
      className="requestId"
      onClick={() => onOTARequestItemClick(requestId, data)}
    >
      {requestId}
    </span>
  )
}

Story:

    import React from 'react'
    
    import RequestId from '.'

      const storyObject = {
      title: 'RequestId',
    
      component: RequestId,
    }
    
    export default storyObject
  
    const Template = (args) => <RequestId {...args} />
    
    export const Default = Template.bind({})
    Default.args = {
      requestId: '066f54aa-10f9-4db3-8985-61c318ac279a',
    }

错误： could not find react-redux context value; please ensure the component is wrapped in a <Provider>.

如何将此组件包装在 provider 中以及当 provider 被包装存储时要传递什么？

Answer 1

这就是我解决问题的方法：（这会在故事书上显示 id）

import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import RequestId from '.'
import rootReducer from '../../../../../../../reducers'
import { storiesOf } from '@storybook/react'
const store = createStore(rootReducer)

storiesOf('RequestId', module)
  .addDecorator((Story) => <Provider store={store}>{<Story />}</Provider>)
  .add('default', (args) => (
    <RequestId requestId={'066f54aa-10f9-4db3-8985-61c318ac279a'} />
  ))

如何为 react-redux 编写故事书？

how to write storybook for react-redux?

reactjs

storybook