rootReducer
1const initState = { 2 todos: [ 3 {id: 1, title: 'test1', content: 'content1', done: false}, 4 {id: 2, title: 'test2', content: 'content2', done: true} 5 ] 6} 7 8const rootReducer = (state = initState, action) => { 9 switch (action.type) { 10 case 'DONE_TOGGLE': 11 let index = state.todos.findIndex((todo) => todo.id === action.id) 12 state.todos[index].done = !state.todos[index].done 13 return { 14 todos: [...state.todos] 15 } 16 } 17 return state 18} 19 20export default rootReducer;
Dashboard
1import React from 'react' 2import { Link } from 'react-router-dom' 3import { connect } from 'react-redux' 4import TodoSummary from '../todos/TodoSummary' 5 6const Dashboard = ({todos}) => { 7 return ( 8 <div className="container dashboard"> 9 <h2 className="indigo-text darken-4">ALL TASKS</h2> 10 <div className="dashboard-links"> 11 <Link to='/' >全て</Link> 12 <Link to='/finish' >完了</Link> 13 <Link to='/notfinish' >未完了</Link> 14 </div> 15 { todos && todos.map(todo => { 16 return ( 17 <TodoSummary todo={todo} key={todo.id}/> 18 ) 19 })} 20 </div> 21 ) 22} 23 24const mapStateToProps = (state, ownProps) => { 25 console.log(ownProps) 26 return { 27 todos: state.todos 28 } 29} 30 31export default connect(mapStateToProps)(Dashboard);
TodoSummary
1import React from 'react' 2import { connect } from 'react-redux' 3import { deleteTodo, doneToggle } from '../store/actions/todoActions' 4 5class TodoSummary extends React.Component{ 6 handleClick = (id) => { 7 this.props.deleteTodo(id) 8 } 9 handleToggle = (id) => { 10 this.props.doneToggle(id) 11 } 12 render() { 13 const { todo } = this.props 14 return ( 15 <div className="row todosummary"> 16 <div className="col s12"> 17 <div className="card blue-grey darken-1"> 18 <div className="card-content white-text"> 19 <span className="card-title">{ todo.title }</span> 20 <p>{ todo.content }</p> 21 </div> 22 <div className="card-action"> 23 <span className="waves-effect waves-light btn delete-btn" onClick={() => (this.handleClick(todo.id))}>DELETE TASK</span> 24 {todo.done ? <a className="waves-effect waves-light btn lime" onClick={() => (this.handleToggle(todo.id))}>未完了にする</a> : <a className="waves-effect waves-light btn orange" onClick={() => (this.handleToggle(todo.id))}>完了にする</a>} 25 </div> 26 </div> 27 </div> 28 </div> 29 ) 30 } 31} 32 33const mapDispatchToProps = (dispatch) => { 34 return { 35 deleteTodo: (id) => dispatch(deleteTodo(id)), 36 doneToggle: (id) => dispatch(doneToggle(id)) 37 } 38} 39 40 41export default connect(null, mapDispatchToProps)(TodoSummary);
「完了する」もしくは「未完了する」ボタンがクリックされるとreduxのstoreの該当するTodoのdoneがtrue、falseとなるようにしました。
他のコンポーネントではうまくいくのですが、このDashboardからtodoSummaryではうまくいっていません。
また確認としてconsole.log(state.todo.done)をクリックされた時に確認しますと、うまくtrueとfalseが変わっています。
これはどういったことが原因でrenderに反映されていないのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/01 11:03
2019/06/01 11:11
2019/06/01 11:16
2019/06/01 11:17