React Redux無法讓Reducer拾取動作

Question

我一直在學習REDX &反應，並正在建立todo列表。我一直在閱讀和查看不同的文章，但無法弄清楚我在設置中缺少的東西。

當前，您可以通過輸入添加待辦事項。在推送輸入它發送一個addTodo行動與待辦事項文本。

我期待reducer查看動作類型和更新狀態，但它從來沒有。我錯過了什麼？

index.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
import reducer from './reducer.js'; 
import TodoList from './containers/container.js'; 

const store = createStore(reducer); 

ReactDOM.render(
    <Provider store={store}> 
    <TodoList /> 
    </Provider>, 
document.getElementById('app')); 

actions.js

var uuid = require('node-uuid'); 

export function addTodo(text) { 
    console.log('action addTodo', text); 
    return { 
    type: 'ADD_TODO', 
    payload: { 
     id: uuid.v4(), 
     text: text 
    } 
    }; 
} 

TodoListComponent.jsx

import React from 'react'; 
import TodoComponent from './TodoComponent.jsx'; 
import { addTodo } from '../actions/actions.js' 

export default class TodoList extends React.Component { 

    render() { 
    const { todos } = this.props; 

    return (
     <div> 
     <input type='text' placeholder='Add todo' onKeyDown={this.onSubmit} /> 
     <ul> 
      {todos.map(c => (
      <li key={t.id}> 
       <TodoComponent todo={t} styleName='large' /> 
      </li> 
     ))} 
     </ul> 
     </div> 
    ) 
    } 

    onSubmit(e) { 
    const input = e.target; 
    const text = input.value; 
    const isEnterKey = (e.which === 13); 

    if (isEnterKey) { 
     input.value = ''; 
     addTodo(text); 
    } 
    } 

} 

TodoComponent.jsx

import React from 'react'; 
import CSSModules from 'react-css-modules'; 
import styles from './style.css'; 

export default class TodoComponent extends React.Component { 

    render() { 
    const { todo } = this.props; 

    return (
     <div styleName='large'>{todo.text}</div> 
    ) 
    } 
} 

export default CSSModules(TodoComponent, styles); 

container.js

import { connect } from 'react-redux'; 
import TodoList from '../components/TodoListComponent.jsx'; 
import { addTodo } from '../actions/actions.js'; 

const mapStateToProps = (state) => { 
    return { 
     todos: state 
    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     addTodo: text => dispatch(addTodo(text)) 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(TodoList); 

reducer.js

import { List, Map } from 'immutable'; 

const init = List([]); 

export default function(todos = init, action) { 

    console.log('reducer action type', action.type); 

    switch(action.type) { 
    case 'ADD_TODO': 
     console.log('ADD_TODO'); 
     return todos.push(Map(action.payload)); 
    default: 
     return todos; 
    } 
} 

Answer 1

在你TodoListComponent你直接導入你的行動從你的行動文件，但實際上你想要使用你的行動將其作爲容器中的財產分派並傳遞。這就解釋了爲什麼您會看到來自操作的日誌，但不會看到來自Reducer的日誌，因爲該操作從未分派到商店。

所以你TodoListComponent應該是：

import React from 'react'; 
import TodoComponent from './TodoComponent.jsx'; 

export default class TodoList extends React.Component { 

    render() { 
    const { todos } = this.props; 

    return (
     <div> 
     <input type='text' placeholder='Add todo' onKeyDown={this.onSubmit} /> 
     <ul> 
      {todos.map(c => (
      <li key={t.id}> 
       <TodoComponent todo={t} styleName='large' /> 
      </li> 
     ))} 
     </ul> 
     </div> 
    ) 
    } 

    onSubmit(e) { 
    const input = e.target; 
    const text = input.value; 
    const isEnterKey = (e.which === 13); 

    if (isEnterKey) { 
     input.value = ''; 
     this.props.addTodo(text); 
    } 
    } 

} 

Answer 2

import React from 'react'; 
import TodoComponent from './TodoComponent.jsx'; 

export default class TodoList extends React.Component { 

    render() { 
    const { todos } = this.props; 

    return (
     <div> 
     <input type='text' placeholder='Add todo' onKeyDown={this.onSubmit.bind(this)} /> 
     <ul> 
      {todos.map(c => (
      <li key={t.id}> 
       <TodoComponent todo={t} styleName='large' /> 
      </li> 
     ))} 
     </ul> 
     </div> 
    ) 
    } 

    onSubmit(e) { 
    // use the addTodo passed via connect 
    const { addTodo } = this.props; 
    const input = e.target; 
    const text = input.value; 
    const isEnterKey = (e.which === 13); 

    if (isEnterKey) { 
     input.value = ''; 
     addTodo(text); 
    } 
    } 

}