派遣アクション - 反応 - Reduxの中のTodoアプリ

Question

//action code 
 
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED' 
 

 
export const clearCompleted =() => { 
 
    return{ 
 
    type: CLEAR_COMPLETED 
 
    } 
 
} 
 

 

 
//reducer code 
 

 
case CLEAR_COMPLETED: 
 
     return state.map(todo => {if (todo.completed) 
 
     {return {...todo, show:false}} 
 
      else {return todo}})

問題に反応-Reduxの中藤堂アプリケーションでアクションを派遣。クリア完了]ボタンをクリックすることで、店舗を変更しようとすると

import React from 'react' 
 
import { connect } from 'react-redux' 
 
import { clearCompleted } from '../actions' 
 

 

 
const ClearButton = ({dispatch}) => { 
 
    return(
 
    <button fluid onClick={e => {dispatch(clearCompleted())}}> 
 
     Clear Completed 
 
    </button> 
 
) 
 
} 
 

 
export default ClearButton

。 Clear Completedボタンは、完了したToDosをストアから削除し、ToDoリストを更新する必要があります。クリア完了ボタンで 'clearCompleted'アクションを呼び出そうとしています。

Answer 1

connectにコンポーネントをラップすることによって行うことができます。 connectは、2つの引数を最初の呼び出しとして受け取ります。mapStateToPropsはストアのプロパティをコンポーネントの小道具にマッピングし、mapDispatchToPropsはコンポーネントの小道具にマッピングします。また、コンポーネント名がclass syntaxで書かれたその関数への別の呼び出しが続きます。

あなたはconnectでステートレスなコンポーネントを使用して主張する場合、あなたはreduxからcomposeユーティリティを使用することができます。

import React from 'react' 
import {bindActionCreators} from 'redux'; 
import { connect } from 'react-redux' 
import { clearCompleted } from '../actions' 

class ClearButton extends React.Component { 
    render() { 
    const {clearCompleted} = this.props; 
    return(
     <button fluid onClick={clearCompleted}> 
     Clear Completed 
     </button> 
    ) 
    } 
} 

const mapDispatchToProps = dispatch => bindActionCreators({ clearCompleted }, dispatch); 

export default connect(null, mapDispatchToProps)(ClearButton); 

Answer 2

あなたがここに抱えている困難は、あなたのコンポーネントが再来店について何も知らないということである、とdispatch機能は、その小道具になりません。これは、あなたがmapDispatchToPropsの周りをさらにいじりなしdispatch(clearCompleted())を使用できるようになります

：あなたはdispatchを利用可能にすることができ、最も基本的な方法は、これになります。あなたはステートレスコンポーネントではないように、その定義を変更する必要があります。

しかし、小さなボタンに実際にconnectが必要かどうかを尋ねてください。あなたは、おそらくダウン含有する成分から正しい関数を渡すことができます。

// TodoList.js 
class TodoList extends Component { 
    render() { 
    return (
     ... 
     <ClearButton clearCompleted={this.props.clearCompleted} /> 
    ) 
    } 
} 

const mapStateToProps = state => ({ 
    // ... 
}) 

const mapDispatchToProps = dispatch => ({ 
    clearCompleted:() => dispatch(clearCompleted()) 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(TodoList) 

次に、関数は、それが接続する必要がなくClearButtonの小道具になります。

<button onClick={this.props.clearCompleted}>