Reduxのコンテナメソッドからアクションをディスパッチするにはどうすればよいですか？

Question

私はReduxを初めて使いました。私は自分で解決できないというこの質問をしています。

私はTODOリストアプリを作成しましたが、今度はリストに新しいタスクを追加する必要があります。ユーザーはテキスト入力に何かを書きます。ボタンをクリックすると、新しいタスクをリストに追加する必要があります。

私はすでに「ADD TASK」アクションを取得しています。しかし、コンポーネントメソッドの中から呼び出す方法はわかりません。イベントリスナーをボタンに追加しましたが、クリックすると次に何をすべきですか？

class List extends React.Component{ 
    addTask(e){ 
    var title = $('[name=title]'); 
    title.val(''); 
    //what should I do? 
    } 

    render(){ 
    const mappedTasks = this.props.tasks.map(function(task){ 
     return (
     <li key={task.title}>{task.title}</li> 
    ); 
    }); 

    return (
     <div> 
     <ul> 
      {mappedTasks} 
     </ul> 
     <input name='title' /> 
     <button onClick={this.addTask}>Adicionar</button> 
     </div> 
    ); 
    }; 
} 

const mapStateToProps = function(state,ownProps){ 
    return { 
    message: 'Hello World!', 
    tasks: state.tasks 
    } 
} 



const ListComponent = connect(
    mapStateToProps 
)(List); 

この例では、addTaskメソッドから何かをディスパッチしたいと思います。 ReduxのComponentメソッドからディスパッチする適切な方法は何ですか？

@editこれはトリックでした： では、ブランドンは、私はこの方法で

this.props.dispatch({type:'ADD_TASK', payload: {title: title.value}}); 

Answer 1

を使用することができると言いましたように、私は可能な解決策のカップルを見る機能

<button onClick={this.addTask.bind(this)}>Adicionar</button> 

をレンダリングして、どちらが適切かは、特定のユースケースによって異なる場合があります。役立つかもしれないいくつかの質問があります？

1. このListコンポーネントconnectはもしそうなら、あなた は、単にアクションを派遣することができるはずreact-reduxパッケージからconnect()デコレータを使用して（Reduxのストアに-edです。？もしそうなら this.props.dispatch(someActionCreator())
2. あなたがそうのようなListコンポーネント飾る、店にこのコンポーネントを-ing connectに開いている：：。connect(mapStateToProps, mapDispatchToProps)(List)を次にあなたがListコンポーネントに小道具にdispatch()へのアクセス権を持っていることができます。このようqと同じように進むuuestion 1.
3. Listコンポーネントには、dispatch()機能へのアクセス権を持つ祖先がありますか。その場合、そのレベルでアクションディスパッチ関数を作成し、それを呼び出すことができるListコンポーネントに到達するまで、プロップとして渡すことができます。

私が言ったように、あなたの特定のユースケースは、それぞれのアプローチの適合性を決定します。それ以上のご質問がある場合は、お手伝いさせていただきますので、お知らせください。

Answer 2

このようなものを使用できます。コンポーネントでアクションを派遣する

import { Component } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 

import * as TodoActionCreators from './TodoActionCreators' 
console.log(TodoActionCreators) 
// { 
// addTodo: Function, 
// removeTodo: Function 
// } 

class TodoListContainer extends Component { 
    componentDidMount() { 
    // Injected by react-redux: 
    let { dispatch } = this.props 

    // Note: this won't work: 
    // TodoActionCreators.addTodo('Use Redux') 

    // You're just calling a function that creates an action. 
    // You must dispatch the action, too! 

    // This will work: 
    let action = TodoActionCreators.addTodo('Use Redux') 
    dispatch(action) 
} 

render() { 
// Injected by react-redux: 
    let { todos, dispatch } = this.props 

// Here's a good use case for bindActionCreators: 
// You want a child component to be completely unaware of Redux. 

let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch) 
console.log(boundActionCreators) 
// { 
// addTodo: Function, 
// removeTodo: Function 
// } 

return (
    <TodoList todos={todos} 
      {...boundActionCreators} /> 
) 

// An alternative to bindActionCreators is to pass 
// just the dispatch function down, but then your child component 
// needs to import action creators and know about them. 

// return <TodoList todos={todos} dispatch={dispatch} /> 
} 
} 

export default connect(
    state => ({ todos: state.todos }) 
)(TodoListContainer) 

Answer 3

つの最も一般的な方法は、mapDispatchToPropsを使用して小道具にアクションを配置することです。その後、小道具からアクションをディスパッチできます。

componentWillMount() { 
    this.props.actions.loadPropImages(); 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(imageActions, dispatch) 
    }; 
} 

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