爲什麼我的待辦事項與Redux不兼容？

我正在做一個簡單的redux/react todo應用程序。我無法拿到待辦事項。我能夠console.log的數據，但不能讓它出現。我究竟做錯了什麼？爲什麼我的待辦事項與Redux不兼容？

我分開的文件，這是我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;

來源

2017-07-02 userden

你從console.log（{todo}）得到了什麼？ –

我在問題上添加了一個編輯，它顯示了我從console.log獲得的內容。 – userden

這是因爲有您的TodoList和減速機之間的脫節。 TodoList，當映射，預計每個待辦事項具有message支柱，但你的減速器，返回下一個狀態時，僅包括狀態陣列中的消息時，不與message屬性的對象：

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

相反，做不只是把下一個狀態的數組中的message串，放在整個對象：

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

現在todo數組中的每一個元素將是一個對象，並有一個message和id財產。此外，嘗試使用一個始終唯一的表達式key - 它不應該是待辦事項消息，也不是您提供的id，因爲它使用的是Math.random，它們都可能具有相同的密鑰。

來源

2017-07-02 15:54:02 Li357

謝謝！哦，這樣一個愚蠢的錯誤.. – userden

爲什麼我的待辦事項與Redux不兼容？

回答

相關問題