Question

为web包设置什么是handel连接装饰我试图运行webpack但没有发生任何事情

/*

connect(store)

class App extends React.Component{

}
*/

Answer 1

要使用connect()，您需要定义一个名为mapStateToProps的特殊函数，它告诉我们如何将Redux存储状态转换为道具。例如，VisibleTodoList需要计算todos以传递给TodoList，因此我们定义了一个根据state.visibilityFilter过滤state.todos的函数，并在mapStateToProps中使用它：

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    case 'SHOW_ALL':
    default:
      return todos
  }
}
 
const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

现在必须派遣行动来阅读国家。为此，您可以使用接收mapDispatchToProps()方法的dispatch()函数，并返回要注入组件的回调道具。

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

最后，通过调用connect（）并传递这两个函数来使用VisibleTodoList：

import { connect } from 'react-redux'
 
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
 
export default VisibleTodoList

如何在react redux中使用connect

1 个答案: