Bentley Communities
Bentley Communities
  • Site
  • User
  • Site
  • Search
  • User
  • Welcome
  • Products
  • Support
  • About
  • More
  • Cancel
中国BDN社区
  • Welcome to Bentley Communities
  • Bentley's Communities
  • 中国BDN社区
  • Cancel
中国BDN社区
中国BDN社区-威客 Redux基本使用
    • Sign In
    • 中国BDN社区-威客
    • -iTwin.js编程
      • iModel.js Front-End简介
      • iModel.js 样例项目配置与运行
      • iModel.js.UI开发基本介绍
      • iModel.js前端统一选择一致性机制
      • iModel.js基本查询
      • iModel.js若干前端功能开发样例
      • imodel图形显示简单介绍
      • iModel文件的合并等操作
      • Redux基本使用
      • simple-viewer-app源码简单分析
      • TypeScript基本介绍及环境配置
      • 下载视口截图
      • 关于imodel测量单位的转换
      • 关于如何导入与导出imodel中schema文件
      • 基于PresentationRules个性化显示iModel的内容
      • 如何在视窗内添加自定义装饰
      • 如何将2个bim中的图形模型显示在一个视图中
      • 用户选择保存感兴趣的视图
    • +MicroStation CONNECT版SDK的新变化
    • +MicroStation编程技巧
    • +OpenRoads中国版平台开发指南
    • +ORD SDK二次开发编程
    • +一步步学习ABD-CE开发
    • +一步步学习MicroStation CE Addin开发
    • 一步步学习MicroStation CE MDL开发
    • +一步步学习ProjectWise编程
    • 中国优先社区二次开发精华帖汇总
    • +学习Microstation交互式工具开发
    • +过期帖,留存仅供参考
    • +非Bentley社区分享的文章
    • C#、C/C++相关的编程知识汇总

     
     Questions about this article, topic, or product? Click here. 

    Redux基本使用

    Redux

    React-Redux 是一个将Redux的Store和React组件集成到一起的框架。

    背景

             一般,我们会将State分布于不同的组件中,并且父组件将State作为属性向子组件传递。当触发事件时,数据通过回调函数的属性沿着组件树向上回调到父组件。不过随着程序规模的增长,管理应用程序的整个State可能会变得愈加困难(例如需要考虑每个组件都将使用其内部的setState方法来改变自身的State),还有可能必须深入组件树,向下追踪独立的组件中的State。

    安装

    npm install redux

    npm install react-redux

    npm install --save-dev @types/react-redux

    npm install redux-thunk

    npm install --save-dev @types/redux-thunk

    Redux三大原则

    唯一数据源

    应用的状态数据应该只存储在唯一的一个Store上。Redux中,整个应用只有一个Store,所有的组件的数据源就是这个Store的状态。

    保持状态只读

    指不能直接修改状态,要修改Store的状态,必须通过派发一个action对象完成,这与Flux一样。

    只能通过纯函数改变数据

    这里的纯函数指Reducer,在Redux中,每个reducer的函数签名都一样:

    Reducer(state,action),第一个参数state是当前状态,第二个参数是接收到的action对象。

    Redux主要内容解释

    Provider

    Provider的作用主要是“provider”,其角色是store的提供者。一般,将原有组件树的根节点包包裹在Provider中,这样整个组件数上的节点都可以通过connect获取store了。

     

    ReactDOM.render(

    <Provider store={store}

             componentRoot

    </Provider>

    ….

    );

    Connect

    Connect是用来连接store与组件的方法。

    常见用法:

    Export default connect(mapStateToProps,mapDispatchToProps)(Component);

    通过connect让组件得以连接store,从sotre中获取需要的数据和方法。

    MapStateToProps

    mapStateToProps是一个方法,接收参数(即store.getState()的结果),返回一个普通的TypeScript对象,对象的内容会被合并到最终的显示组件上。也可以这样理解,mapStateToProps就是从全局的状态数据中挑选,计算得到显示组件所需要数据的过程,即从state到组件的映射。也可以从其名字“map state to props”看出。这个方法会在最初state发生改变时,被调用并计算出结果,结果作为界面控件的属性并影响其行为。

     

    MapDispatchToProps

    mapDispatchToProps的命名风格与mapStateToProps类似。即接受参数dispatch(也是store的dispatch方法)并返回一个普通的TypeScript对象,对象的内容也会被合并到最终的显示组件上,一般用于生成数据属性,mapDispatchToProps一般用于生成行为属性,即回调函数。

    Redux-thunk

    Redux-thunk允许dispatch一个函数而不是一个action对象,如果接受的action类型是函数,则可以直接调用它并将dispatch与getState作为参数传入,这样,在action creator所返回的thunk内部就可以获取dispatch和getState,延迟dispatch或者根据条件选择dispatch,甚至在一个thunk可以多次dispatch。

    State

    Redux将所有State数据存储在单个对象,简化了在应用程序中查看State的方式,因为我们需要了解的应用程序的信息都在一个地方:真实单一数据源。

    Action

    应用程序的State数据存储在单个不可变的对象中,并不意味着这个State对象不可以修改。我们可以通过整体鹈鹕的方式更新这个State对象。这个Action就是我们获得具体的变更命令:需要变更应用程序State的具体指令,以及执行这些变更必需的数据。注意,Action是Redux更新应用程序的唯一方式。

    Reducer

    Reducer就是一类函数,将当前的State和Action作为参数传入,通过这些参数创建和返回一个新的State。Reducer主要用来更新State树的特定部分,不仅包括叶子节点还包括分支。

    同时还支持将多个Reducer合称一个Reducer,来处理应用程序中任意给定的Action的所有State更新。

    Store

    在Redux中,Store就是保存应用程序State数据和处理所有State更新的地方。虽然Flux支持多个Store共存,但是,Redux只有一个Store。这个Store通过将当前的State和Action传递给单个Reducer来进行更新State,也可能会通过组合和合称若干Reducer创建一个这样的单个Reducer。

    模块划分

    Redux一般将应用非UI的逻辑拆分为:action(action creator),store(reducer)和selector,而UI逻辑主要依赖UI库所提供的React的组件。一般,在开发一个React+Redux应用时候,一般遵循这样的步骤:

    1. 整理action,实现action creator。
    2. 设计store state,实现reducer。
    3. 划分界面内容,实现显示组件。
    4. 通过容器组件连接store和显示组件。

     

     

    • Share
    • History
    • More
    • Cancel
    • Devin Liu Created by Devin Liu
    • When: Fri, Mar 6 2020 9:07 PM
    • Revisions: 1
    • Comments: 0
    Recommended
    Related
    Communities
    • Home
    • Getting Started
    • Community Central
    • Products
    • Support
    • Secure File Upload
    • Feedback
    Support and Services
    • Home
    • Product Support
    • Downloads
    • Subscription Services Portal
    Training and Learning
    • Home
    • About Bentley Institute
    • My Learning History
    • Reference Books
    Social Media
    •    LinkedIn
    •    Facebook
    •    Twitter
    •    YouTube
    •    RSS Feed
    •    Email

    © 2023 Bentley Systems, Incorporated  |  Contact Us  |  Privacy |  Terms of Use  |  Cookies