1.connect中有些传递参数了,有些没有传递,看了好多次了不明白为什么,请细说下;2. 父组件到子组件整个状态相关过程是怎样的?

来源:7-31 串讲react-redux知识点

斜杠男人

2021-03-14

相关代码如下:
1. AddTodo.js文件

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

// 函数组件,接收 props 参数
let AddTodo = ({ dispatch }) => {
  // dispatch 即 props.dispatch
  console.log("dispatch:", dispatch);
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          // 创建一个 todo
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}

// connect 高阶组件 ,将 dispatch 作为 props 注入到 AddTodo 组件中
AddTodo = connect()(AddTodo)

export default AddTodo

2. VisibleTodoList.js文件

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

// 不同类型的 todo 列表
const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}
      
const mapStateToProps = state => {
  // state 即 vuex 的总状态,在 reducer/index.js 中定义
  return {
    // 根据完成状态,筛选数据
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = dispatch => {
  return {
    // 切换完成状态
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

// connect 高阶组件,将 state 和 dispatch 注入到组件 props 中
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList
写回答

1回答

双越

2021-03-15

第一,如果需要传递 state 和 dispatch 操作,那就传入connect中,如果不需要就可以不传。这是 connect 的最基本的用法。

第二,“父组件到子组件整个状态相关过程是怎样的?”—— 这个问题太范了,你具体哪里不明白,可以详细指出来,我来解答。

0
0

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4669 学习 · 1647 问题

查看课程