React Redux cantがリダクションを受け取ります

Question

私はredux &を勉強していますし、todoリストを作成しています。私は別の記事を読んで見てきましたが、私のセットアップでは何が欠けているのか理解できません。

現在、入力経由でToDoを追加できます。入力を押すと、todoテキストでaddTodoアクションが送信されます。

私はレデューサーがアクションタイプを見て状態を更新することを期待していますが、それは決してありません。私は何が欠けていますか？

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

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

actions.js

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

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ごTodoListComponentあなたは、あなたの行動のファイルから直接あなたの行動をインポートするには

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

実際には、あなたが君がしている行動を使用したいpをディスパッチしてコンテナ内のプロパティとして渡します。これは、アクションがログに記録される理由を説明していますが、アクションがストアに送信されることはありません。

だからあなたTodoListComponentは次のようになります。TodoListComponent.jsx` `で

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

}