Redux
あらすじ 最近 React 案件の商談が多いのですが「Redux で書かれたビジネスロジックのテストもお願いしたい」とか言われて、んん？となったのでなんとなくブログにします。 ビジネスロジック と Redux が混在する？何故？ Redux はおおざっぱにいうと以下の…
前回は Redux の範疇である action と reducer を定義しました。 今回は React の処理を記述します。 create src/index.js: import React from 'react' import { render } from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { …
前回でサーバーを準備したので今回はフロント側を準備します。 準備 以下を参考に webpack 関係を準備します。 https://gist.github.com/okamuuu/831b03f1dee84dea8d3893b9c8afabe3 Frontend で実装する機能 Frontend で以下の機能を実装します。 /api/sessi…
あらすじ SPA で認証機能を使いたいので練習します。 対象読者 redux の middleware について大体わかる JWT について大体わかる 大体わからない場合は以下をご一読下さい http://qiita.com/kuy/items/c6784fe443f1d5c7bbdc http://qiita.com/nabeliwo/items…
前々回で redux となる actions, reducers を記述しました。 前回で react である components を記述しました。 今回はこれらをつなげる containers を記述していきます。 containers src/containers/MemoList.js: import { connect } from 'react-redux' im…
前回の記事で action と reducers の記述方法を学びました。 ここでは components を定義します。 components は redux に無関係で純粋に react のみを使ってみます。 準備 npm install --save-dev jsdom react-addons-test-utils components create src/com…
公式サイトのチュートリアルでは Todo App の Example が載っているのでそれを写経するのが良いのですがちょっと長いのでそれを短くした Memo アプリを紹介します。 準備 mkdir practice-react-redux && cd $_ mkdir src www test mkdir src/{actions,compon…
前回の続きです。 http://okamuuu.hatenablog.com/entry/2016/10/06/160721 準備 create src/actions.js: /* * action types */ export const ADD_TODO = 'ADD_TODO' export const TOGGLE_TODO = 'TOGGLE_TODO' export const SET_VISIBILITY_FILTER = 'SET_V…
準備 mkdir practice-redux && cd $_ mkdir src www npm init -f npm install --save-dev webpack webpack-dev-server npm install --save-dev babel-core babel-loader babel-preset-es2015 npm install --save-dev babel-preset-stage-0 babel-polyfill np…
