react.js - react-redux遇到的一些问题？

问题描述

问 题

在做react-redux官网给的examples中todos例子时，遇到了一点问题，希望有人帮忙解答一下：

//App.js
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)
export default App

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

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        console.log(addTodo(input.value));
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

q1:这段代码，dispatch是如何被引进来的？

let nextTodoId = 0
export const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

q2:addTodo方法为什么最后返回的结果是：{...,text: "xxx"}

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

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)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

const mapStateToProps = (state) => ({
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

const mapDispatchToProps =  ({
  onTodoClick: toggleTodo
})

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

//TodoList.js
import React, { PropTypes } from 'react'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

export default TodoList

q3: TodoList.js中{ todos, onTodoClick }是从哪里接收来的todos，和onTodoClick这两个参数的？

希望大家帮忙看一下，共同学习，谢谢

解决方案

1.这段代码，dispatch是如何被引进来的？

AddTodo 经过 react-redux 的 connect 修饰后，react-redux 会把 dispatch 作为 props 传给 AddTodo。

2.addTodo方法为什么最后返回的结果是：{...,text: "xxx"}

不明白你的问题在哪，方法的返回很明确啊，不然你觉得应该返回什么？ES6 的箭头方法如果只有一个表达式的时候是不需要写return的，那个表达式就会默认作为返回值。

3.TodoList.js中{ todos, onTodoClick }是从哪里接收来的todos，和onTodoClick这两个参数的？

同问题一，你在connect里写了mapStateToProps和mapDispatchToProps，这两个方法返回的object会合并成一个，然后通过props传给AddTodo。

这篇关于react.js - react-redux遇到的一些问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！