Reactjs-using-flux
ReactJS-フラックスの使用
この章では、Reactアプリケーションにフラックスパターンを実装する方法を学びます。 Redux フレームワークを使用します。 この章の目標は、 Redux と React の接続に必要なすべてのピースの最も単純な例を提示することです。
手順1-Reduxのインストール
Reduxを*コマンドプロンプト*ウィンドウからインストールします。
C:\Users\username\Desktop\reactApp>npm install --save react-redux
ステップ2-ファイルとフォルダーの作成
このステップでは、アクション、リデューサー、および*コンポーネント*用のフォルダーとファイルを作成します。 作業が完了すると、これがフォルダ構造の外観になります。
C:\Users\finddevguides\Desktop\reactApp>mkdir actions
C:\Users\finddevguides\Desktop\reactApp>mkdir components
C:\Users\finddevguides\Desktop\reactApp>mkdir reducers
C:\Users\finddevguides\Desktop\reactApp>type nul > actions/actions.js
C:\Users\finddevguides\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\finddevguides\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\finddevguides\Desktop\reactApp>type nul > components/Todo.js
C:\Users\finddevguides\Desktop\reactApp>type nul > components/TodoList.js
ステップ3-アクション
アクションは、 type プロパティを使用してストアに送信するデータについて通知するJavaScriptオブジェクトです。 リストに新しいアイテムを追加するために使用される ADD_TODO アクションを定義しています。 addTodo 関数は、アクションを返し、作成されたすべてのアイテムに id を設定するアクション作成者です。
actions/actions.js
export const ADD_TODO = 'ADD_TODO'
let nextTodoId = 0;
export function addTodo(text) {
return {
type: ADD_TODO,
id: nextTodoId++,
text
};
}
ステップ4-レデューサー
アクションはアプリの変更のみをトリガーしますが、リデューサー*はそれらの変更を指定します。 *switch ステートメントを使用して、 ADD_TODO アクションを検索しています。 レデューサーは、更新された状態を計算して返すために2つのパラメーター( state および action )を受け取る関数です。
最初の関数は新しいアイテムを作成するために使用され、2番目の関数はそのアイテムをリストにプッシュします。 最後に向けて、 combineReducers ヘルパー関数を使用して、将来使用する可能性のある新しいレデューサーを追加できます。
reducers/reducers.js
import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'
function todo(state, action) {
switch (action.type) {
case ADD_TODO:
return {
id: action.id,
text: action.text,
}
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
todo(undefined, action)
]
default:
return state
}
}
const todoApp = combineReducers({
todos
})
export default todoApp
ステップ5-保管
ストアは、アプリの状態を保持する場所です。 レデューサーがあれば、ストアを作成するのは非常に簡単です。 ルートコンポーネントをラップする provider 要素にstoreプロパティを渡します。
main.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App.jsx'
import todoApp from './reducers/reducers'
let store = createStore(todoApp)
let rootElement = document.getElementById('app')
render(
<Provider store = {store}>
<App/>
</Provider>,
rootElement
)
ステップ6-ルートコンポーネント
*App* コンポーネントは、アプリのルートコンポーネントです。 ルートコンポーネントのみがreduxを認識する必要があります。 注目すべき重要な部分は、ルートコンポーネント *App* を *store* に接続するために使用される *connect* 関数です。
この関数は、引数として select 関数を取ります。 Select関数は、ストアから状態を取得し、コンポーネントで使用できる小道具( visibleTodos )を返します。
App.jsx
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'
class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props
return (
<div>
<AddTodo onAddClick = {text =>dispatch(addTodo(text))}/>
<TodoList todos = {visibleTodos}/>
</div>
)
}
}
function select(state) {
return {
visibleTodos: state.todos
}
}
export default connect(select)(App);
ステップ7-その他のコンポーネント
これらのコンポーネントは、reduxを認識すべきではありません。
components/AddTodo.js
import React, { Component, PropTypes } from 'react'
export default class AddTodo extends Component {
render() {
return (
<div>
<input type = 'text' ref = 'input'/>
<button onClick = {(e) => this.handleClick(e)}>
Add
</button>
</div>
)
}
handleClick(e) {
const node = this.refs.input
const text = node.value.trim()
this.props.onAddClick(text)
node.value = ''
}
}
components/Todo.js
import React, { Component, PropTypes } from 'react'
export default class Todo extends Component {
render() {
return (
<li>
{this.props.text}
</li>
)
}
}
components/TodoList.js
import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'
export default class TodoList extends Component {
render() {
return (
<ul>
{this.props.todos.map(todo =>
<Todo
key = {todo.id}
{...todo}
/>
)}
</ul>
)
}
}
アプリを起動すると、リストにアイテムを追加できるようになります。