2016-12-27_HowToReact.md

目次

1. html, cssコーディング
2. 静的コンポーネント作成
3. store設計 (JSON)
4. storeを参考にactionTypesを作成
5. actionTypesからactionCreatorsを実装
6. XHRはmodelに
7. actionCreatorsreducerを作成
8. mountComponentとmountComponentWithRedux関数
9. インタラクションを実装
10. jestとenzymeでテスト

1. html, cssコーディング

書こう

2. 静的コンポーネント作成

作ろう

3. store設計 (JSON)

todoリストの場合

{
  items: [
    { title: "some task", doneAt: "2016-12-27" },
    ...
  ],
  isProcessing: false
}

4. storeを参考にactionTypesを作成

export const ADD_ITEM = "ADD_ITEM";
export const DONE_ITEM = "DONE_ITEM";
export const DELETE_ITEM = "DELETE_ITEM";

export const ON_PROCESSING = "ON_PROCESSING";
export const OFF_PROCESSING = "OFF_PROCESSING";

5. actionTypesからactionCreatorsを実装

import * as t from "./action-types";

export function addItem(item) {
  return { type: t.ADD_ITEM, item };
}

...

6. XHRはmodelに

redux-thunkを使う前提

import Item from "../models/item";

export function addItem(item) {
  return (disptach, getState) => {
    const { isProcessing } = getState();
    if (isProcessing) { return; }
    dispatch(onProcessing());

    Item.create(item).then((itemModel) => {
      dispatch({ type: t.ADD_ITEM, itemModel });
      dispatch(offProcessing());
    });
  };
}

export default class Item {
  static create(attrs) {
    return axios.post(`/items.json`, attrs).then((res) => new Item(res.data));
  }

  constructor(attrs) {
    this.attrs = attrs;
  }

  get id() { return this.attrs.id; }
  get body() { return this.attrs.body; }
}

7. actionTypesからreducerを作成

import * as t from "./action-types";

function items(state = [], action) {
  const { type, itemModel } = action;

  switch(type) {
    case t.ADD_ITEM:
      return state.concat([itemModel]);
    ...
    default:
      return state;
  }
}

8. mountComponentとmountComponentWithRedux関数

mountComponent.js

9. インタラクションを実装

がんばろう

10. jestとenzymeでテスト

enzymeでReactのテストをしてみた
enzymeでReactコンポーネントのイベントハンドラをテストしてみた
俺の最近のRailsのJS開発環境を教えてやる
testHelper.js