上节课我们介绍了异步action，对中间件也做了一点介绍，我们知道异步action需要通过中间件的支持才能正常使用。这节课我们来介绍一个库react-redux。

回顾

在开始这节课的内容之前，我们对上节课的内容来做一个简单的回顾

  • 异步操作不想在组件自身操作时交给异步action
  • 异步action中通常会调用同步action
  • 异步action需要中间件redux-thunk的支持

以上便是上节课的主要要点，接下来我们开始对这节课内容的学习。

react-redux库

在开发中，很多开发者在使用react的时候都喜欢在redux中来做集中式的状态管理，然后react官方团队发现了这一现象之后呢，就自己开发了一款react-redux库，之前我们说redux库和react没有半毛钱关系，但是现在的react-redux库可就不一样了，这个库是react的一个扩展库。

但是我们现在不是已经成功使用上了redux了嘛，我们还要react-redux干什么呢？我们使用redux的整个流程我们确实已经都打通了，我们也确实已经可以用redux来对我们的react组件来做集中化状态管理了。但是如果我们用react-redux库的话，我们可以更加方便地在我们的react项目中来使用我们的redux。

react-redux模型图

我们先来看模型图。首先react-redux库把组件分为两类，一类是UI组件，另一类叫容器组件。我们的所有的UI组件都是容器组件的子组件。而容器组件才是真正和redux打交道的组件，但是UI组件不可以使用redux，只是对页面来做呈现应的。

但是如果UI组件中要获取redux中存放的state，或者修改redux中存放的state的话都要通过容器组件，容器组件会通过props来把UI组件所需要的state和修改state的方法都传给UI组件

总结

  • react-redux库把组件分为两类
  • UI组件
  • 容器组件
  • 只有容器组件可以直接操作redux
  • UI组件必须通过容器组件来操作redux
  • UI组件所需要的redux中的状态以及操作状态的方法都要由容器组件通过props来交互

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/understand_react_redux/