[React+Typescript] Storybook에 Redux 설정하는 법 - could not found react-redux context value 에러 해결

storybook에 별도의 redux 설정 없이

redux를 사용하는 컴포넌트의 story를 렌더링하려고 하면 해당 에러를 마주치게 된다.

 

 

해결방법 - storybook에 redux 설정하는 법

💡 Provider로 감싸기

redux를 사용하는 프로젝트에서 index.tsx 파일에 Provider로 감싸주듯이

모든 story 파일들을 Provider로 감싸주면 된다.

 

.storybook 폴더에서

1. preview 파일의 확장자를 ts 에서 tsx로 변경 (⭐️중요⭐️ 이거 안하면 decorator가 안먹어요!)

2. decorators를 추가하여 Provider로 감쌉니다. (=> 모든 story에 설정되므로 global decorator라고도 합니다)

3. Provider에 프로젝트에서 사용하고있는 store 객체를 넣어줍니다.

import React from "react";
import type { Preview } from "@storybook/react";
import { Provider } from "react-redux";
import store from "../src/redux/store";
import 'reflect-metadata';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (Story) => (
    /* provider 설정 */
      <Provider store={store}>
      	<Story />
      </Provider>
    )
  ]
};

export default preview;

 

 

해결 완료! 🙌