Reduxでstateを変更した際にコンポーネントが再描画されない

表題の通りです。
以下がコードになります。

js
1Task.js
2
3import React from "react"
4import PropTypes from "prop-types"
5class Task extends React.Component {
6  constructor(props){
7    super(props)
8    this.state =  {
9      name: '',
10      desctiprtion: ''
11    }
12
13  }
14
15  render () {
16    const list = this.props.tasks.map((task, i) => <li key={i}>{task}</li>)
17    return (
18      <div>
19        <ul>{list}</ul>
20        <input type="text" onChange={e => this.setState({name: e.target.value})}></input>
21        <input type="text" onChange={e => this.setState({descriptiton: e.target.value})}></input>
22        <button onClick={() => this.props.addTask(this.state)}>Post</button>
23      </div>
24    );
25  }
26}
27
28export default Task

js
1taskContainer.js
2
3import { connect } from 'react-redux';
4import * as actions from '../actions/taskAction';
5import Task from '../components/Task';
6
7const mapStateToProps = state => (
8  {
9    tasks: state.tasks
10  }
11)
12
13const mapDispatchToProps = dispatch => {
14 return {
15   addTask: (task) => dispatch(actions.addTask(task)) 
16  }
17}
18
19const ConnectedTask = connect(mapStateToProps, mapDispatchToProps)(Task)
20export default ConnectedTask

js
1taskAction.js
2
3export const addTask = (task) => {
4  return {
5    type: 'ADD_TASK',
6    payload: { task: task } 
7  }
8}

js
1taskReducer.js
2
3const initialState = {
4  tasks: []
5}
6
7export const taskReducer = (state = initialState, action) => {
8  switch(action.type){
9    case 'ADD_TASK':
10      const task = action.payload.task
11      const newState = Object.assign({}, state)
12      newState.tasks.push(task)
13      return newState;
14    default: 
15      return state
16  }
17}

js
1configureStore.js
2
3import { createStore } from 'redux'
4import { taskReducer } from './reducers/taskReducer'
5
6const configureStore = () => {
7  const store = createStore(taskReducer)
8  console.log(store)
9  return store
10}
11
12export default configureStore

js
1App.js
2
3import React from 'react'
4import { Provider } from 'react-redux'
5import ConnectedTask from '../containers/taskContainer'
6import configureStore from '../configureStore'
7
8const store = configureStore();
9
10class App extends React.Component {
11  render() {
12    return (
13      <Provider store={store}>
14        <ConnectedTask />
15      </Provider>
16    )
17  }
18}
19
20export default App
21

一番上のTask.jsがコンポーネントでformに値を入れてaddTaskを発火させても、Task.jsがrerenderされず、
postした値が描画されません。。。

何卒よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

以下の修正で動きました。

Task.js

task はそのままでは表示できないので、とりあえず name と description を表示
description の綴りを修正

diff
1 class Task extends React.Component {
2   constructor(props){
3     super(props)
4     this.state =  {
5       name: '',
6-      desctiprtion: ''
7+      description: ''
8     }
9 
10   }
11 
12   render () {
13-    const list = this.props.tasks.map((task, i) => <li key={i}>{task}</li>)
14+    const list = this.props.tasks.map((task, i) => <li key={i}>Name: {task.name}, Description: {task.description}</li>)
15     return (
16       <div>
17         <ul>{list}</ul>
18         <input type="text" onChange={e => this.setState({name: e.target.value})}></input>
19-        <input type="text" onChange={e => this.setState({descriptiton: e.target.value})}></input>
20+        <input type="text" onChange={e => this.setState({description: e.target.value})}></input>
21         <button onClick={() => this.props.addTask(this.state)}>Post</button>
22       </div>
23     );
24   }
25 }

taskReducer.js

state だけじゃなく、state.tasks も作り直す必要があります。

参考: 破壊的なメソッドと非破壊的なメソッド - 配列 · JavaScript Primer #jsprimer

diff
1 export const taskReducer = (state = initialState, action) => {
2   switch(action.type){
3     case 'ADD_TASK':
4       const task = action.payload.task
5       const newState = Object.assign({}, state)
6-      newState.tasks.push(task)
7+      newState.tasks = state.tasks.concat([task]);
8       return newState;
9     default: 
10       return state
11   }
12 }

なお、オブジェクトや配列を一つ一つ作り直すのはつらいし間違いも起こりやすいので、スプレッド構文を活用することをお勧めします。
参考: [ES2015] 配列の展開 - 配列 · JavaScript Primer #jsprimer
参考: オブジェクトのspread構文でのマージ - オブジェクト · JavaScript Primer #jsprimer

diff
1 export const taskReducer = (state = initialState, action) => {
2   switch(action.type){
3     case 'ADD_TASK':
4       const task = action.payload.task
5-      const newState = Object.assign({}, state)
6-      newState.tasks.push(task)
7-      return newState;
8+      return { ...state, tasks: [...state.tasks, task] };
9     default: 
10       return state
11   }
12 }