Laravel5.7 + React + Redux + Thunk

こちらの記事のRedux対応版（改修の余地あり）です。個人的な備忘メモなので解説あまりしてません。

準備

npm install --save redux react-redux redux-thunk

ディレクトリ構造

Laravelのresourcesのjsの中を以下のようにしました。
Redux-Wayとも呼べない中途半端なもの。結局containerは利用しませんでした。

実装

app.js

Laravelにおけるエンドポイント。まあ、初期jsを読み込んでるだけ。

require('./index.js');

index.js

index.jsってのを作りました。

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider, connect } from 'react-redux';
import createStore from './createStore';
import TodoApp from './components/TodoApp';


const store = createStore();

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

components/Todo.js

コンポーネントとしては一番根っこになるTodoApp。
中のテーブル行のレンダリングで、更に子の<RenderList>を呼んでいる。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Provider, connect } from 'react-redux';
import createStore from '../createStore';
import * as actions from '../actions/Todo';
import RenderList from './RenderList';


class TodoApp extends Component {

    constructor(){
        super();
        this.inputChange = this.inputChange.bind(this);
        this.addTodo = this.addTodo.bind(this);
    }

    inputChange(event){

        switch(event.target.name){
            case 'todo':
                this.props.changeTodo(event.target.value);
                break;
            default:
                break;

        }
    }

    addTodo(){

        if(this.props.state.todo == ''){
            return;
        }

        this.props.addTodo(this.props.state.todo);
        this.props.changeTodo('');
    }


    render() {
        return (
            <React.Fragment>
                {/* form */}
                <div className="form-group mt-4">
                    <label htmlFor="todo">新規Todo</label>
                    <input type="text" className="form-control" id="todo" name="todo" value={this.props.state.todo} onChange={this.inputChange}/>
                </div>
                <button type="submit" className="btn btn-primary" onClick={this.addTodo}>登録</button>
                {/* table */}
                <table className="table mt-5">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>タスク</th>
                            <th>完了</th>
                        </tr>
                    </thead>
                    <tbody>
                        <RenderList/>
                    </tbody>
                </table>
            </React.Fragment>
        );
    }

    componentDidMount(){
        this.props.getTodos();
    }
}

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

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

export default connect(mapStateToProps,mapDispatchToProps)(TodoApp);

components/RenderList.js

<tr>をレンダリングしている。
Reduxを利用して、バケツリレーせず、TodoAppでもRenderListでも同じ値やメソッドを呼び出している。

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


class RenderList extends React.Component{

    constructor(){
        super();
        this.deleteTask = this.deleteTask.bind(this);
    }

    deleteTask(todo){
        this.props.deleteTodo(todo);
    }

    render(){

        const todolist = this.props.state.todos.map(todo => {
            return (
                <tr key={todo.id}>
                    <td>{todo.id}</td>
                    <td>{todo.title}</td>
                    <td><button className="btn btn-secondary" onClick={() => this.deleteTask(todo)}>完了</button></td>
                </tr>
            );
        });

        return (todolist);
    }
}

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

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

export default connect(mapStateToProps,mapDispatchToProps)(RenderList);

createStore.js

createStoreってファイル作る文化はないのだけど、作ってみました。storeディレクトリ作ってもいいのかも。
thunkの利用を宣言しています。

import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import { todoReducer } from "./reducers/Todo";
import thunk from 'redux-thunk';

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

    return store;
}

reducers/Todo.js

reducer。基本的にTODOのCRUD用ですが、CHANGE_TODOだけ、input の値更新用となっている。

const initialState = {
    todos: [],
    todo: ''
}

export const todoReducer = (state = initialState, action) => {
    // console.log(action.todos);
    switch (action.type){
        case 'GET_TODOS':
            const getState = Object.assign({}, state);
            getState.todos = action.todos;
            return getState;
        case 'ADD_TODO':
            const addState = Object.assign({}, state); 
            addState.todos = action.todos;
            return addState;
        case 'DELETE_TODO':
            const delState = Object.assign({}, state);
            delState.todos = action.todos;
            return delState;
        case 'CHANGE_TODO':
            const changeState = Object.assign({}, state);
            changeState.todo = action.todo
            return changeState;
        default:
            return state;
    }
}

actions/Todo.js

action。changeTodoはUpdateではなくてinputのonChange()に対応する用のメソッドとした（もっといい方法あると思う）。
thunk使って、actionの中で非同期処理してます。記述は最低限です。

import axios from 'axios';

export const addTodo = (todo) => async dispatch => {

    const response = await axios.post('/api/add',{title: todo});

    dispatch({
        type: 'ADD_TODO',
        todos: response.data
    });
}

export const getTodos = () => async dispatch => {

    const response = await axios.get('/api/get');

    dispatch({
        type: 'GET_TODOS',
        todos: response.data
    });
}

export const deleteTodo = (todo) => async dispatch => {

    const response = await axios.post('/api/del',{id: todo.id});

    dispatch({
        type: 'DELETE_TODO',
        todos: response.data
    });

}

//onChange用
export const changeTodo = (todo) => {
    return {
        type: 'CHANGE_TODO',
        todo: todo
    }
}

とりあえず以上。