如何在 react redux 中使用 connect

Question

webpack预设了什么来处理连接装饰我尝试运行 webpack 但什么也没发生

/*

connect(store)

class App extends React.Component{

}
*/

Answer 1

要使用connect()，您需要定义一个名为mapStateToProps 的特殊函数，它告诉我们如何将 Redux store state 转换为 props。比如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)
  }
}

现在 o 必须调度操作来读取状态。为此，您可以使用 mapDispatchToProps() 函数接收 dispatch() 方法和 returns 要注入组件的回调道具。

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

How use connect in react redux

reactjs

webpack

ecmascript-2016