React&Reduxエッセンシャル

9666 ワード
React redux React テキストリンク

Redux&Reduxエッセンシャル

まずは，reduce,reducer,state,actionの整理

Reduce,Reducer,State,Actionとは?

reduce -直訳-> 変える
reducer -直訳-> 変化を与えるもの
state -直訳-> 状態
action -直訳-> 実行

定義

Reduceとは，一回あたりの関数適用によって行われる値の変化
Reducerとは，適用される関数の事
Stateとは，reduceされる前の初期状態
Actionとは，stateをどのように変更させるか

例） 関数 F(aを2倍にする処理を行う(Action))

F(2) ->F(a) -Reduce->4

F(2)がState,
F(a)がReducerです．

Redux実践

インポート

import { createStore } from 'redux'

簡単な例

Reducerでは，Actionによって，switch文などでStateに変更を加える

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

掲示板を作ろう

目標

JQueryで言うと，

<html>
<form>
<input type="text" id="hoge" />
<button onclick="push()">追加</button>
</form>
<ul id="list"></ul>
</html>

<script>
function push(){
let sentence = $("#hoge").val() ;
$("#list").append("<li>"+sentence+"</li>") ;
}
</script>

こんなものをReact&Reduxの基礎を踏まえながら説明．

install

React

npmはインストール済みの環境であることを前提とします．
※してない方は $brew install npm

$ npm install -g create-react-app


このようにreactをインストール

プロジェクトの作成

$ create-react-app todo

こんな感じのフォルダが出来ると思います．

$ cd todo

todoに移動しましょう．

Redux

$  npm install --save redux react-redux redux-logger

todoフォルダにReduxのインストール

これで環境構築は完了．

ディレクトリの作成

actions
components
containers
reducers
というフォルダをsrc下に配置
各フォルダ内にtodo.jsを作成しましょう．

また，src下にcreatestore.jsというファイルも作ってください．

createstore.jsに関数を作ります

import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import logger from "redux-logger";
import { todoReducer } from "./reducers/todo";

export default function createStore() {
  const store = reduxCreateStore(
    combineReducers({
      todo: todoReducer,
    }),
    applyMiddleware(
      logger,
    )
  );

  return store;
}

ReactにReduxを適用

index.jsを変更します．

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import createStore from './createstore';

const store = createStore() ;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

redux,createstoreをインポートして，Providerにstoreをセットしてるだけです．

serviceWorker.unregister()とはオフラインでのキャッシュを無効にしてます．
これはcreate-react-appをすると標準でついてます．今は無視してOKです．

Component定義

components/todo.js
todo追加用のテキストボックスとボタンを書き入れます．

import React from 'react';

export default class Todo extends React.Component{
  render(){
    return(
      <div>
        <input type="text" />
        <button>追加</button><br />
        <ul>
          <li>aaa</li>
          <li>bbb</li>
        </ul>
      </div>
    );
  }
}

Action定義

actions/todo.js

export const addTodo = (todo) => {
  return {
    type: 'ADD_TODO',
    payload: { todo: todo }
  };
}

Actionは、Reducerに指令を出します。
type プロパティを必ず持ち、これが処理のキーになります。

payload プロパティは、処理に使うパラメータで、この例では追加するTODOを持たせています

Reducer定義

reducer.todo.js

const initialState = {
  todoList: []
}

export const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      // 新しく追加するTODO
      const todo = action.payload.todo;
      // stateを複製して追加
      const newState = Object.assign({}, state);
      newState.todoList.push(todo);
      return newState;
    default:
      return state;
  }
};

state は書き換えるのではなく新たなオブジェクトとするのがredux.

単純に引数のstateに追加するのではなく、

Object.assignメソッドで複製した新たな state に対して追加し、
それを戻り値とします。

Componentの定義

components/todo.js

import { connect } from 'react-redux';
import * as actions from '../actions/todo';
import Todo from '../components/todo';

const mapStateToProps = state => {
  return {
    todo: state.todo,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addTodo: (todo) => dispatch(actions.addTodo(todo)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Todo)

mapStateToProps関数
使用する state を切り出して、propsで参照できるようにするための関数

mapDispatchToProps関数
dispatchするための関数をpropsにマッピングするための関数

それぞれ定義したものを、connect関数でコンポーネントに接続し、exportします。こうすることで、コンポーネントがreduxによる状態管理を意識せず、stateやdispatchを参照、実行できるようになります。

コンテナの使い方は、コンポーネントをimportしている箇所をコンテナに切り替えるのみ。
app.js

import React, { Component } from 'react';
import './App.css';
//import Todo from './components/todo';
import Todo from './containers/todo';

Componentの書き換え

components/todo.js

import React from 'react';

export default class Todo extends React.Component {
  state = {
    todo: ''
  }

  render() {
    console.log(this.props);

    // StoreのTodoからリストを生成
    const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)

    return (
      <div>
        <input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
        <button onClick={() => this.props.addTodo(this.state.todo)}>追加</button><br />
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}

冗長なコードになればなるほどreduxの恩恵が大きいです．
変更点がすぐに分かるので，チームでの開発が従来よりも簡単．