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); 
    } 
    } 

}