CODEWITHSUNDEEP
reactjsstorybook
Jaimini Chothwani
Jaimini Chothwani

Reputation: 195

how to write storybook for react-redux?

I am writing a storybook in React but the component using redux is giving me the error? can someone help with writing the storybook?

Component:

 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',
    }

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

how to wrap this component in provider and what to pass in when the provider is wrapped store ?

Upvotes: 0

Views: 765

Answers (1)

Jaimini Chothwani
Jaimini Chothwani

Reputation: 195

This is how I solved the issue:(this displays the id on storybook)

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'} />
  ))

Upvotes: 2

Related Questions