跳到主要内容

2 篇博文 含有标签「react」

查看所有标签

· 阅读需 2 分钟

如何在 Console 中获取当前 redux 的 store 值​

如果你安装了 react developer tools ，你可以通过 $r.store.getState(); 来获取，不用改别的代码.

Note: 你需要先打开 react developer tool 之后，让他可用, 不然你回遇到 $r is not defined error


image.png


  1. 开打 developer tools
  2. 点击 「React」 tab
  3. 确认 provider 节点 (or topmost 节点) 现在是被选中的
  4. 然后输入 $r.store.getState(); or $r.store.dispatch({type:"MY_ACTION"}) 到你的浏览器 console

https://stackoverflow.com/questions/34373462/while-debugging-can-i-have-access-to-the-redux-store-from-the-browser-console

· 阅读需 4 分钟

常常会碰到这种需求，对列表中的某个元素进行操作，然后改变这个对象的一个属性值。

今天就在这里踩到了坑。也算是对react渲染机制加深的理解。

是这样的，我有一个好友列表，需要点击添加操作来加好友，而这个用户的对象中有一个属性值是isFriend，再添加成功后需要对其进行改变。

当然，通常的思路就是，把这个列表中的这行记录的那个属性值设为true即可，添加按钮就隐藏掉。 untitled1.png

我在reducer中循环匹配，匹配成功的话就isFriend设置为true，但是呢，奇怪的事情发生了，界面并没有像预想的一样隐藏掉添加按钮。

代码片段如下：

    newArr = oldState.contactsList.map(function mapFunc(contact) {
        var result = contact;

        if (result.id === action.data) {
            result.isFriend = true;
        }
        return result;
    });

    return Object.assign({}, oldState, {
      contactsList: newArr,
    });

看起来确实没有什么不对劲的呀，我打开react-dev-tool看组件的值，也确实改变过来了。什么鬼呢？！

后来找了找，给了我启发，于是动手试了试，果然是因为数组中的对象的引用未改变导致未重新渲染。

修正后的代码如下：

    if (result.id === action.data) {
        // 不能直接赋值，此处直接赋值，引用不变，被认为对象为改变，则不重新渲染
        result = Object.assign({}, result, {isFriend: true});
    }