Reduxのインストール
npm install --save redux
Reduxの実装
public/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample count app.</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.js
// 各種クラス、関数が利用できるようにインポート
import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
// No.9「No.7」で使用しているActionCreatorを定義
const actionCreator = (count) => ({
type: ACTION_COUNT_UP,
payload: {
count
}
});
// No.7「No.6」で使用している関数のコンポーネントを定義
function CountApp({ store }) {
const { count } = store.getState();
return (
<div>
// No.8 以下のbuttonを押下すると、spanタグの中の{count}がインクリメントされるように、イベントの登録をしています。
<span>{count}</span>
<button value={ACTION_COUNT_UP} onClick={() => store.dispatch(actionCreator(count))}>Count Up.</button>
</div>
);
}
// No.4「No.3」の関数のstateの初期値を定義
const initialState = {
count: 0
};
// No.5「No.3」で使用しているActionのtypeを定義
const ACTION_COUNT_UP = 'COUNT_UP';
// No.3「No.2」に渡すreducer（stateの更新処理）を定義
function reducer(state = initialState, action) {
switch (action.type) {
case ACTION_COUNT_UP:
return {
count: ++action.payload.count
};
default:
return state;
}
}
// No.2「No.1」に渡すstoreを作成
const store = createStore(reducer);
// No.10「No.8」のbuttonが押下されて、「3.」のreducerが実行された際、
// renderCountApp()が実行されるようにリスナーの登録を行っています。
store.subscribe(() => renderCountApp(store));
// No.6「No.1」で実行している関数を定義
function renderCountApp(store) {
render(
<CountApp store={store} />,
document.getElementById('root')
);
}
// No.1 全体の表示処理
renderCountApp(store);
※Reactを使っているので、Reactをインストール前提のソースコードです。
参考：Reactの開発環境構築～Hello,World!