Question

＆＃13;

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

＆＃13;

在react-redux中对Todo应用程序的问题调度操作。

＆＃13;

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

＆＃13;

尝试通过单击“清除完成按钮”来更改商店。清除完成按钮应从商店中删除已完成的待办事项，并应更新待办事项列表。我打算打电话给'clearCompleted＆＃39;清除完成按钮的操作。

Answer 1

你遇到的困难是你的组件对Redux商店一无所知，dispatch函数不会出现在它的道具中。您可以使dispatch可用的最基本方法是：

export default connect()(ClearButton)

这样您就可以使用dispatch(clearCompleted())而不会与mapDispatchToProps进一步混淆。你必须改变它的定义，所以它不是无状态的组件。

但是，您应该问自己一个小按钮是否真的需要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}>

Answer 2

您可以将您的组件包装在connect中。连接接受两个参数作为第一个电话，mapStateToProps用于将商店属性映射到您的组件的道具和mapDispatchToProps，用于将动作创建者映射到您的组件中道具。接着再次调用该函数，其中使用您的组件名称class syntax编写。

如果您坚持使用connect的无状态组件，则可以使用compose中的redux实用程序。

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

单击按钮时调度操作 - react-redux中的Todo应用程序

2 个答案: