Storybook에서 Redux Store에 연결

소개

스토리북로 작성된 Story (Store에 connect 된 컴퍼넌트를 아래에 가지는 컴퍼넌트)를 Redux의 <Privider />로 랩 해, Storybook용의 moc 데이터( initialState )를 출력할 때까지를 비망록을 겸해서 씁니다.

환경 구축

실행 환경

Mac OS Sierra: v10.12.6

노드: v8.11.2

npm: v5.6.0

yarn: v1.5.1

React 앱 구축

create-react-app storybook-react-redux-sample
# 作成したプロジェクトのルートに移動
cd storybook-react-redux-sample

Storybook 환경 구축

# StorybookのCLIをグローバルインストール
npm i -g @storybook/cli
getstorybook

여기까지 무사히 성공하면

yarn storybook

명령줄에서 실행하고 http://localhost:9009/ 브라우저의 주소 표시줄에 입력하여 액세스할 수 있습니다.

React와 Redux 연결

Redux Todos Example을 기반으로 Reducer, Store 및 구성 요소를 만듭니다.

Reducer

샘플의 일부를 변경하고 process.env.NODE_ENV를 사용하여 Storybook 환경의 경우 initialState (모의 데이터)를 정의합니다.

/src/reducers/todos.js

const initialState =
  process.env.NODE_ENV === "storybook"
    ? [
        {
          id: 1,
          text: "hogehoge",
          completed: true
        }
      ]
    : [];

const todos = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case "TOGGLE_TODO":
      return state.map(
        todo =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
};

export default todos;

스토어

/src/index.js

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";

import App from "./components/App";
import rootReducer from "./reducers";

export const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

환경 변수 ( NODE_ENV )

Storybook을 시작할 때 환경 변수 NODE_ENV에 storybook가 적용되도록 Storybook을 시작하는 스크립트에 NODE_ENV=storybook를 추가합니다.

package.json

  "scripts": {
    ...
    "storybook": "NODE_ENV=storybook start-storybook -p 9009 -s public",
    ...
  },

Story 추가

루트 구성 요소의 요소 <App />가 Redux에 연결하기 위해 <Provider />에 래핑되도록 addDecorator API를 사용하십시오.

/storybook-react-redux-sample/src/stories/index.js

import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { linkTo } from "@storybook/addon-links";
import { Button, Welcome } from "@storybook/react/demo";
import { Provider } from "react-redux";

import App from "../../src/components/App";
import { store } from "../../src/index";

storiesOf("App", module)
  .addDecorator(story => <Provider store={store}>{story()}</Provider>)
  .add("connected to Redux Store", () => <App />);

위의 {story()} 부분은 <App />로 대체됩니다.

샘플 코드