ReactJS ストリームの使用

この章では、Reactアプリケーションでフロー・パターンを実装する方法を学びます。Reduxフレームワークを使用します。この章の目標は、ReduxとReactを接続するために必要な各部分の最もシンプルな例を示すことです。

第1手順-Reduxをインストール

私たちは以下のようにコマンドプロンプトウィンドウでReduxをインストール。

C:\Users\username\Desktop\reactApp>npm　install　--save　react-redux

第2手順-ファイルとフォルダーを作成

このステップで、私たちのためにフォルダーとファイルを作成します。actions、reducersおよびcomponents。作業が完了すると、これがフォルダー構造のようになります。

C:\Users\w3codebox\Desktop\reactApp>mkdir　actions
C:\Users\w3codebox\Desktop\reactApp>mkdir　components
C:\Users\w3codebox\Desktop\reactApp>mkdir　reducers
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　actions/actions.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　reducers/reducers.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　components/AddTodo.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　components/Todo.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　components/TodoList.js

手順3- actions

actionsはJavaScriptオブジェクトであり、それらはtype属性を使用して、通知すべきデータを店に送信します。アクションは、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-Reducers

アクションはアプリケーション内の変更をトリガーするだけでなく、reducerはこれらの変更を指定します。ADD_TODOアクションを検索するswitch文を使用しています。reducerは、stateとactionを2つの引数として必要とし、更新された状態を計算し返す関数です。

最初の関数は新しいアイテムを作成するために使用され、二つ目の関数はそのアイテムをリストに追加します。最後に、combineReducersアシスタント関数を使用して、将来使用する可能性のある新しいreducerを追加します。

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
)
default todoApp export

手順5-Store

main.js

Reactからimport
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をストアに接続するための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>
　　　　　　)
　　　}
}

アプリケーションを起動したとき、プロジェクトをリストに追加できるようになります。