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

小刘
  • 526

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)

回复
阅读 1.9k
2 个回答
✓ 已被采纳

...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哪知道哪个函数长得这样?都是封装好的。道理很简单,还不够努力,还要加油

...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))
} />

对应

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏