Skip to main content

One post tagged with "react"

View All Tags

· One min read

如何在 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

· One min read

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

今天就在这里踩到了坑。也算是对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});
}