私のToDoアイテムがReduxでレンダリングされないのはなぜですか？

Question

私は単純なredux/respond todoアプリをやっています。私はtodoの項目を表示することはできません。私はconsole.logデータにアクセスできますが、表示されることはありません。私は間違って何をしていますか？

私は私のapp.jsあり、ここで、ファイルを分離：ここ

import React, { Component } from 'react'; 
import Todos from './todos'; 
import TodoList from "./todo_list"; 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <Todos /> 
     <TodoList/> 
     </div> 
    ); 
    } 
} 

はコンテナTodos次のとおりです。ここで

import React, {Component} from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { addTodo } from '../actions/index'; 

class Todos extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {text: ''}; 
    } 

    addTodo(e) { 
     e.preventDefault(); 
     this.props.addTodo(this.state.text); 
     this.setState({ 
      text: '' 
     }); 
    } 

    updateValue(e) { 
     this.setState({text: e.target.value}) 
    } 

    render() { 
     return (
      <div> 
       <form onSubmit={(e) => this.addTodo(e)}> 
        <input 
         placeholder="Add Todo" 
         value={this.state.text} 
         onChange={(e) => { 
          this.updateValue(e) 
         }} 
        /> 
        <button type="submit">Add Todo</button> 
       </form> 
      </div> 
     ); 
    } 
} 


function mapDispatchToProps(dispatch) { 
    return bindActionCreators({addTodo}, dispatch); 
} 

export default connect(null, mapDispatchToProps)(Todos); 

はTodoListです：

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 

class TodoList extends Component { 

    render() { 
     return (
      <ul> 
       { this.props.todo.map((tod) => { 
        return <li key={tod.message}>{ tod.message }</li> 
       })} 
      </ul> 
     ); 
    } 
} 

function mapStateToProps({ todo }) { 
    console.log({ todo }); 
    return { todo }; 
} 

export default connect(mapStateToProps)(TodoList); 

リデューサー：

import { ADD_TODO } from '../actions/types'; 

export default function(state=[], action) { 
    switch(action.type) { 
     case ADD_TODO: 
      return [ action.payload.message, ...state ] 
    } 
    return state; 
} 

およびアクション

import { ADD_TODO } from './types'; 
const uid =() => Math.random().toString(34).slice(2); 

export function addTodo(message) { 
    const action = { 
     id: uid(), 
     message: message 
    }; 
    return { 
     type: ADD_TODO, 
     payload: action 
    }; 
} 

これは私にconsole.log（{TODO}）から得るものです。ここで

私のリデューサー/インデックスです：

import { combineReducers } from 'redux'; 
import TodosReducer from './reducer_addTodo'; 

const rootReducer = combineReducers({ 
    todo: TodosReducer 
}); 

export default rootReducer; 

Answer 1

あなたTodoListと減速機の間に切断がありますので、それはです。やる、その代わり

case ADD_TODO: 
    return [ action.payload.message, ...state ] 

：次の状態を返すときマッピングは、各TODOはmessage小道具を持っていることを期待、しかし、あなたの減速、唯一の状態配列ではなく、メッセージmessageプロパティを持つオブジェクトが含まれてTodoList、ただ、全体のオブジェクトに入れて次の状態の配列にmessage文字列、入れない：

case ADD_TODO: 
    return [ action.payload, ...state ] 

を今すぐtodo配列内のすべての単一の要素がオブジェクトであるとmessageとid性質を持つことになります。また、keyには常にユニークな式を使用してください。実際にはtodoメッセージであってはなりません。idはMath.randomを使用しているため、キーが同じである可能性があります。