zoukankan      html  css  js  c++  java
  • 使用Redux管理React数据流要点浅析


    在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state。组件所有的行为通过Actions来触发,然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。

    那么Store是如何和视图绑定的呢? 
    在主入口文件index.js中,通过Provider标签把Store和视图绑定:

    <Provider store={store}>
         //项目代码
    </Provider>
    

    在项目中,Store是如何具体管理State呢?实际上是通过Reducers根据不同的Action.type来更新不同的state,即(previousState,action) => newState。最后利用Redux提供的函数combineReducers将所有的Reducer进行合并,更新整个State树。

    在Redux项目中,利用Container容器组件作为桥梁,将React组件和Redux管理的数据流联系起来。Container通过connect函数将Redux的state和action转化成展示组件即React组件所需的Props。

    //将state.data绑定到相应的React组件的Props的data
    function mapStateToProps(state){
       return {
          data:state.data
       }
    }
    //将actions的所有方法绑定到相应的React组件的Props上
    function mapDispatchToProps(dispatch){
       return bindActionCreators(actions,dispatch)
    }
    //通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到相应的React组件的Props上
    export default connect(mapStateToProps,mapDispatchToProps)(reactComponent)
    

    通过上面的分析,我们总结为一幅更详细的图示:

    注册Store:

    //applyMiddleware可以包装Store的dispatch,thunk的作用是使action创建函数可以返回一个function替代action对象
    const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
    ... ...
    const store = createStoreWithMiddleware(reducer,initialState)
    

    这里可能有同学会有疑问,React的state和Redux所说的state是同一回事吗?下面我们简要分析一下:

    首先,React组件的state和props定义如下:

    state-只表示一些临时的、内部的状态数据,例如窗口的打开或关闭状态。

    props-通常存储一些方法,一些可能需要库存的长期数据和一些需要传递的共享数据。

    然后,Redux和React基本上只有2种联系:

    要么React从Redux的state中读取数据,要么React通过dispatch分发action到Redux,Redux的reducer来返回一个新的state。

    结论是Redux的state存放的是全局的长期数据,也就是对应的React组件的Props数据,而组件React的state应该是临时的内部状态数据,所以这两个state没有半毛钱关系。

    下面我们总结一下Redux的三大原则和数据流的管理:

    Redux三大原则:

    1、单一数据源,这个应用的state被存储在一棵object tree中,并且这个object tree只存在于唯一的Store中。

    2、state是只读的,唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象。

    3、使用纯函数来执行修改,为了描述action如何改变state tree,需要编写reducer。

    Redux数据流的管理:

    1、action:把数据传递到Store,唯一数据来源。

    2、reducer:action只描述有事情发生,reducer指明如何更新state,即设计state结构和action处理。

    3、Store:把action和reducer联系到一起,负责维持、获取和更新state。

    4、生命周期:数据流严格且单向

    调用Store.dispatch(action)->Store调用传入的reducer函数,Store会把两个参数传入reducer:当前的state树和action->根reducer将多个子reducer输出合并成一个单一的state树->Store保存了根reducer,并返回完整的state树。

     
  • 相关阅读:
    一文读懂网管协议
    Python 3.8 离线安装
    Redis 6.X 离线安装
    ES 日期格式影响聚合效果
    (1)Canal入门
    (10)MySQL进阶篇SQL优化(InnoDB锁-间隙锁)
    (9)MySQL进阶篇SQL优化(InnoDB锁-记录锁)
    (8)MySQL进阶篇SQL优化(InnoDB锁-共享锁、排他锁与意向锁)
    (7)MySQL进阶篇SQL优化(InnoDB锁-事务隔离级别 )
    (6)MySQL进阶篇SQL优化(MyISAM锁)
  • 原文地址:https://www.cnblogs.com/rudylemon/p/redux.html
Copyright © 2011-2022 走看看