React-redux Dispatch之后更新子组件

Question

1.首先子组件通过Provider以及context拿到顶级组件的store

2.然后再某一组件中Dispatch更改store

问题：Dispatch之后如何在其他子组件中更新view？

Answer 1

其实store变化会触发state变化，子组件接收到变化的时候需要通过componentDidUpdate来接受这个变化，同时通过context中的store来作相应的修改

Answer 2

在最外层加上provider ,里层子组件可以全部调用到store ,建议看下redux 文档！

Answer 3

你在action中处理过本次的dispatch操作之后，再次dispatch另一个组件的action就行了。

Answer 4

如果在某一组件中Dispatch async action, 是去做请求，要成功后才更改另一个子组件的状态，那么是要再次dispatch另一个组件的action。如果只是是普通action, 可以在另一组件对应的reducer中监听该action， 修改数据。

Answer 5

redux 最常见的更改 store 却不更新的问题就是浅比较的问题，源码中这样比较:

nextStateForKey !== previousStateForKey

这意味着你这样返回一个文章列表是没用的：

let { articles } = store
articles.push(newArticle)
return {...store, articles}

而应该：

let { articles } = store
articles = articles.slice(0)
articles.push(newArticle)
return {...store, articles}

这样才算是返回一个新的 state 哦!

再比如：

let { user } = store
user.name = 'newName'
return { ...store, user }

要这样写

let { user } = store
user.name = 'newName'
return {...store, user: {...user}}

这就是js引用导致的

var state = {name: 'a'}
var oldState = state
state.name = 'b'
console.log(oldState === state) // true -> 不刷新
state = {name: 'b'}
console.log(oldState === state) // false -> 刷新

希望可以抛砖引玉。

哈哈，还可以看看我的这个 redux源码解析...(逃