redux react-redux

redux:state更新

  • action creators使用 store 的store.dispatch() 方法来把action传给store。store获取到action.type后全局查找 Reducers,输出新的state。(store包含dispatch() 方法和reducers)。
  • 前端复杂性在于 view,view 复杂性在于 state 处理。state 复杂是因为包括了 AJAX 返回的数据、当前显示的是哪个 tab 等这些 UI state、表单状态、甚至还有当前的 url 等。Redux 把这些所有的 state 汇总成一个大的对象,起了个名字叫 Store.
  • Redux 限定一个应用只能有一个 Store。单一 Store 带来的好处是,所有数据结果集中化,操作时的便利,只要把它传给最外层组件,那么内层组件就不需要维持 state,全部经父级由 props 往下传即可。子组件变得异常简单。
  • action 对象各种各样,每种对应某个 case ,但最后都汇总到 state 对象中,从多到一,这是一个减少(reduce)的过程

Redux起源于React,但它们并没有关系。它是独立的,支持React、Angular、Ember或者更多其他的框架

react-redux:组件更新

两个方法:
-Provider
-connect

主要思路:

  • Redux提供唯一store。
  • 用Provider组件包含住最顶层的组件,将store作为props传入。
  • 用connect方法mapStateToProps获取store树结构中的全局state,return state的部分属性作为子组件的props
  • 子组件调用action,dispath到reducer返回新的state,同步到store的树结构中,通知组件进行更新

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...