My answer

.ruby-version

@@ -0,0 +1 @@
+2.3.4

app/controllers/api/messages_controller.rb

@@ -19,7 +19,7 @@ def create
       @message = Message.new(message_params)
 
       if @message.save
-        render json: @message, status: :created, location: [:admin, @message]
+        render json: @message, status: :created, location: [:api, @message]
       else
         render json: @message.errors, status: :unprocessable_entity
       end

client/app/actions/chat.js

@@ -1,6 +1,27 @@
-import { HELLO_WORLD_NAME_UPDATE } from '../constants/chat'
+import { ADD_MESSAGE, CREATE_MESSAGE_LIST, TOGGLE_DISPLAY_STATE, UPDATE_MESSAGE, REMOVE_MESSAGE } from '../constants/chat'
 
-export const updateName = (text) => ({
-  type: HELLO_WORLD_NAME_UPDATE,
-  text,
+// message: messageになる
+export const addMessage = (message) => ({
+  type: ADD_MESSAGE,
+  message,
+})
+
+export const createMessageList = (messages) => ({
+  type: CREATE_MESSAGE_LIST,
+  messages,
+})
+
+export const toggleDisplayState = (id) => ({
+  type: TOGGLE_DISPLAY_STATE,
+  id,
+})
+
+export const updateMessage = (message) => ({
+  type: UPDATE_MESSAGE,
+  message,
+})
+
+export const removeMessage = (id) => ({
+  type: REMOVE_MESSAGE,
+  id,
 })

client/app/components/Message/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+
+class Message extends Component {
+  onClick() {
+    const { actions, id } = this.props
+    actions.toggleDisplayState(id)
+  }
+
+  onRemove() {
+    const { actions, id } = this.props
+    $.ajax({
+      type: 'DELETE',
+      url: '/api/messages/' + id,
+      success: (() => actions.removeMessage(id))
+    })
+  }
+
+  render() {
+    const { text } = this.props
+    return (
+      <div>
+        <div>
+          <span onClick={this.onClick.bind(this)}>{text}</span>
+          <input type="button" value="削除" onClick={this.onRemove.bind(this)} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Message

client/app/components/MessageForm/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import $ from 'jquery'
+
+// Componentはイベントが使える
+class MessageForm extends Component {
+  onSubmit() {
+    const { actions, message } = this.props
+    if (message) {
+      $.ajax({
+        type: 'PATCH',
+        url: '/api/messages/' + message.id,
+        data: {
+          message: {text: this.textMessage.value}
+        },
+        success: ((data) => actions.updateMessage(data))
+      })
+    } else {
+      $.ajax({
+        type: 'POST',
+        url: '/api/messages',
+        data: {
+          message: {text: this.textMessage.value}
+        },
+        success: ((data) => actions.addMessage(data))
+      })
+    }
+  }
+
+  onCancel() {
+    const { actions, message } = this.props
+    actions.toggleDisplayState(message.id)
+  }
+
+  // メソッド定義
+  render() {
+    const { message } = this.props
+    const cancelButton = message ? <input type="button" value="キャンセル" onClick={this.onCancel.bind(this)} /> : null
+    return (
+      <div>
+        <textarea ref={(input) => { this.textMessage = input }} rows="4" cols="40" defaultValue={message ? message.text : ''} />
+        {cancelButton}
+        <input type="button" value={message ? '更新' : '登録'} onClick={this.onSubmit.bind(this)} />
+      </div>
+    )
+  }
+}
+
+export default MessageForm

client/app/components/MessageList/index.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import $ from 'jquery'
+import Message from '../Message'
+import MessageForm from '../MessageForm'
+
+class MessageList extends Component {
+  componentDidMount() {
+    const { actions } = this.props
+    $.ajax({
+      type: 'GET',
+      url: '/api/messages',
+      success: ((data) => actions.createMessageList(data))
+    })
+  }
+
+  renderMessage(actions, message) {
+    return (
+      message.displayState ?
+        <Message key={message.id} actions={actions} {...message} /> :
+        <MessageForm key={message.id} message={message} actions={actions} />
+    )
+  }
+
+  render() {
+    const { messages, actions } = this.props
+    return (
+      <div>
+        {
+          messages.map((message) =>
+            this.renderMessage(actions, message)
+          )
+        }
+      </div>
+    )
+  }
+}
+
+export default MessageList

client/app/constants/chat.js

@@ -1 +1,6 @@
 export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE'
+export const ADD_MESSAGE = 'ADD_MESSAGE'
+export const CREATE_MESSAGE_LIST = 'CREATE_MESSAGE_LIST'
+export const TOGGLE_DISPLAY_STATE = 'TOGGLE_DISPLAY_STATE'
+export const UPDATE_MESSAGE = 'UPDATE_MESSAGE'
+export const REMOVE_MESSAGE = 'REMOVE_MESSAGE'

client/app/containers/Chat/index.js

@@ -3,7 +3,8 @@ import { Provider, connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import * as Actions from '../../actions/chat'
 
-import Messages from '../../components/Messages'
+import MessageList from '../../components/MessageList'
+import MessageForm from '../../components/MessageForm'
 
 class App extends Component {
   constructor(props) {
@@ -13,7 +14,10 @@ class App extends Component {
   render() {
     const { chat, actions } = this.props
     return (
-      <Messages name={chat.name} updateName={actions.updateName} />
+      <div>
+        <MessageList messages={chat} actions={actions} />
+        <MessageForm actions={actions} />
+      </div>
     )
   }
 }

client/app/reducers/Chat.js

@@ -1,12 +1,40 @@
 import { combineReducers } from 'redux'
-import { HELLO_WORLD_NAME_UPDATE } from '../constants/chat'
+import { ADD_MESSAGE, CREATE_MESSAGE_LIST, TOGGLE_DISPLAY_STATE, UPDATE_MESSAGE, REMOVE_MESSAGE } from '../constants/chat'
 
-export const chatInitialState = {name: 'World'}
+export const chatInitialState = [{"id":2,"text":"message2"},{"id":1,"text":"message1"}]
 
 const chat = (state = '', action) => {
   switch (action.type) {
-    case HELLO_WORLD_NAME_UPDATE:
-      return {...state, name: action.text}
+    case TOGGLE_DISPLAY_STATE:
+      const id = action.id
+      return state.map((message) => {
+        if (message['id'] === id) {
+          message['displayState'] = !message['displayState']
+        }
+        return message
+      })
+    case CREATE_MESSAGE_LIST:
+      return action.messages.map((message) => {
+        message['displayState'] = true
+        return message
+      })
+    case ADD_MESSAGE:
+      const message = action.message
+      message['displayState'] = true
+      return [...state, message]
+    case UPDATE_MESSAGE:
+      const updatedMessage = action.message
+      return state.map((m) => {
+        if (m['id'] === updatedMessage['id']) {
+          updatedMessage['displayState'] = true
+          return updatedMessage
+        } else {
+          return m
+        }
+      })
+    case REMOVE_MESSAGE:
+      const removeId = action.id
+      return state.filter((message) => message['id'] !== removeId)
     default:
       return state
   }

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+