在做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
。