请教关于redux的问题，怎么设置断点，还有dispatch的理解

Question

AddTodo.js

import React, { Component, PropTypes } from 'react'
import { ADD_TODO, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from '../actions'
import { connect } from 'react-redux'

/*
    先给一个组件设置一个 ref='xxx' 的属性，注意这个ref必须是全局唯一的。

    <input ref=‘city’ />

    然后就可以通过 this.refs.city 来访问这个组件。
 */

export default class AddTodo extends Component {
    render() {
        return (
            <div>
                <input type='text' ref='input' />
                <button onClick={(e) => this.handleClick(e)}>
                    Add
                </button>
            </div>
        )
    }

    handleClick(e) {
        const node = this.refs.input
        const text = node.value.trim()
        this.props.onAddClick(text)
        node.value = ''
    }
}

AddTodo.propTypes = {
    onAddClick: PropTypes.func.isRequired
}

App.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
import AddTodo from '../components/AddTodo'

/*
    let [x, y] = [1, 2, 3];
    x // 1
    y // 2

    let [a, [b], d] = [1, [2, 3], 4];
    a // 1
    d // 4
    b // 2

    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
 */

/*
    Store 就是把它们联系到一起的对象。Store 有以下职责：

    维持应用的 state；
    提供 getState() 方法获取 state；
    提供 dispatch(action) 方法更新 state；
    通过 subscribe(listener) 注册监听器;
    通过 subscribe(listener) 返回的函数注销监听器。

    // Dispatch some actions
    store.dispatch(addTodo('Learn about actions'))
    store.dispatch(addTodo('Learn about reducers'))
    store.dispatch(addTodo('Learn about store'))
 */

// 点击按钮 发出了增加 text 的action请求
class App extends Component {
    render() {
        const { dispatch } = this.props
        return (
            <div>
                <AddTodo
                    onAddClick={text =>
                        dispatch(addTodo(text))
                    } />
            </div>
        )
    }
}

// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
export default connect()(App);

我想监测

return [
                ...state,
                {
                    text: action.text,
                    completed: false
                }
            ]

...state的变化，请问怎么打断点？

这两个地方打断点都看不到

App.js中onAddClick传的是{text => dispatch(addTodo(text))}

                <AddTodo
                    onAddClick={text =>
                        dispatch(addTodo(text))
                    } />

为什么到AddTodo.js就是this.props.onAddClick(text)

Answer 1

...state的变化，请问怎么打断点？

看来我之前回答的都白讲了，首先...是什么你都没有搞明白。这里你监测...state的变化干嘛，[...state,{text: action.text,completed: false }]等价于state.concat({text: action.text,completed: false })。现在你告诉你检测这个...state有啥意义？你要么监测state要么监测state.concat({text: action.text,completed: false })。怎么知道它们什么值，断到return的时候，控制台直接手动输入state或者state.concat({text: action.text,completed: false })，看他们是什么值啊。

为什么到AddTodo.js就是this.props.onAddClick(text)?

React学的太差了，还要下点劲！props还是没弄清楚他是干嘛！父子组件通信，好比你爸爸寄了一箱特产给你，你去领快递的时候，你说我要领一箱特产，人送快递怎么知道哪个快递是特产。你是不是得报手机号或者快递编号这种唯一标识。这里也是一样的。父组件将这个函数{text=>dispatch(addTodo(text))}传给子组件是不是得标识一下，所以这里标识就是onAddClick。你从props拿的时候能告诉props你要那这个函数你是不是得告诉它这个函数的唯一标识啊。你要是告诉props你要长{text=>dispatch(addTodo(text))}这样的函数，props哪知道哪个函数长得这样?都是封装好的。道理很简单，还不够努力，还要加油

Answer 2

...state,
{
    text: action.text,
    completed: false
}

等于

{
    text: action.text1,
    completed: false
},
{
    text: action.text2,
    completed: false
},
{
    text: action.text,
    completed: false
}

子元素的this.props.onAddClick(text)与父元素的

onAddClick={text =>
    dispatch(addTodo(text))
} />

对应