Provider >

Provider > 使组件层级中的 方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 Provider 中才能使用 方法。

如果你真的不想把根组件嵌套在 <Provider> 中,你可以把 store 作为 props 传递到每一个被 connect() 包装的组件,但是我们只推荐您在单元测试中对 store 进行伪造 (stub) 或者在非完全基于 React 的代码中才这样做。正常情况下,你应该使用 <Provider>。

属性

  • store (Redux Store): 应用程序中唯一的 Redux store 对象
  • children (ReactElement) 组件层级的根组件。

https://www.redux.org.cn/docs/react-redux/api.html#provider-store

https://www.redux.org.cn

Redux 中文文档

https://www.ctolib.com/yiransheng-redux-free-flow.html

https://segmentfault.com/a/1190000019056045

Rematch: Redux 的重新设计

https://segmentfault.com/a/1190000019056045

  • Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store;
  • redux一个特点是:状态共享,所有的状态都放在一个store中,任何component都可以订阅store中的数据;
  • 并不是所有的state都适合放在store中,这样会让store变得非常庞大,如某个状态只被一个组件使用,不存在状态共享,可以不放在store中;

视图层绑定引入了几个概念:

  • <Provider> 组件: 这个组件需要包裹在整个组件树的最外层。这个组件让根组件的所有子孙组件能够轻松的使用 connect() 方法绑定 store。
  • connect():这是 react-redux 提供的一个方法。如果一个组件想要响应状态的变化,就把自己作为参数传给 connect() 的结果,connect() 方法会处理与 store 绑定的细节,并通过 selector 确定该绑定 store 中哪一部分的数据。
  • selector:这是你自己编写的一个函数。这个函数声明了你的组件需要整个 store 中的哪一部分数据作为自己的 props。
  • dispatch :每当你想要改变应用中的状态时,你就要 dispatch 一个 action,这也是唯一改变状态的方法。

http://www.devio.org/2019/03/13/react-native-redux/

action和reducer只用于修改state的状态;

副作用

准备工作

根据需要安装以下组件。

  • redux(必选)
  • react-redux(必选):redux作者为方便在react上使用redux开发的一个用户react上的redux库;
  • redux-devtools(可选):Redux开发者工具支持热加载、action 重放、自定义UI等功能;
  • redux-thunk:实现action异步的middleware;
  • redux-persist(可选):支持store本地持久化;
  • redux-observable(可选):实现可取消的action;

http://www.devio.org/2019/03/13/react-native-redux/

React Native+Redux开发实用教程

connect是一个高阶函数,首先传入mapStateToProps、mapDispatchToProps,然后返回一个生产 Component 的函数(wrapWithConnect),然后再将真正的Component作为参数传入wrapWithConnect(MyComponent),这样就生产出一个经过包裹的Connect组件

https://my.oschina.net/shuaihong/blog/3026278

react native redux 草稿的更多相关文章

  1. react native redux saga增加日志功能

    redux-logger地址:https://github.com/evgenyrodionov/redux-logger 目前Reac native项目中已经使用redux功能,异步中间件使用red ...

  2. react native redux

    redux可以解决, 程序中所有组件的状态统一管理, 从而使我们可以更加动态的,灵活的控制程序 React:数据管理使用props.stateRedux的主要思想:提供一个数据存储中心,可以供外部访问 ...

  3. React Native & debug & debugger

    React Native & debug & debugger http://localhost:8081/debugger-ui/ react-devtools # yarn: $ ...

  4. 从React Native到微服务,落地一个全栈解决方案

    Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...

  5. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  6. React Native集成Redux框架讲解与应用

    学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...

  7. react native 中的redux 理解

    redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...

  8. [RN] React Native 使用 Redux 比较详细和深刻的教程

    React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http:/ ...

  9. React Native 开发豆瓣评分(三)集成 Redux

    什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...

随机推荐

  1. 【转】Selenium 报错:Element is not clickable at point的解决办法

    天一同学在写Selenium Java脚本时遇到一个问题,登录进入系统之后,要点击左侧的一个菜单,但是执行到该语句时报下面的错误: Firefox中报错如下:org.openqa.selenium.E ...

  2. 【性能优化】一文学会Java死锁和CPU100%问题的排查技巧

    原文链接: 00 本文简介 作为一名搞技术的程序猿或者是攻城狮,想必你应该是对下面这两个问题有所了解,说不定你在实际的工作或者面试就有遇到过: 第一个问题:Java死锁如何排查和解决? 第二个问题:服 ...

  3. CentOS 6.x安装php 5.6和redis扩展的全过程

    安装PHP 5.6 #yum clean all #yum update 整体升级一下yum包 #yum install -y epel-release #yum list installed | g ...

  4. SAP销售订单需求类型的确定优秀级

    需求类型的确定优秀级:1.策略组里的需求类型:2.MRP组里的:3.SO行项目类别+MRP类型4.SO行项目类别 部分截图:

  5. C# 多维数组 交错数组的区别,即 [ , ] 与 [ ][ ]的区别 (转载)

    多维数组的声明 在声明时,必须指定数组的长度,格式为 type [lenght ,lenght ,lengh, ... ] , ]; 或声明时即赋值,由系统推断长度 int [,] test1 = { ...

  6. 5.Javascript闭包得实现原理和作用

    闭包的实现原理和作用 1.闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数. 2.闭包的作用:访问函数内部变量.保持函数在环境中一直存在,不会被垃圾回收机制 ...

  7. CORS-跨域资源共享 解决跨域问题

    1.什么是跨域? a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容,但是我们在项目开发时,经常遇到一个页 ...

  8. element-ui 自定义 Upload 上传进度条

    <el-upload class="upload-demo" ref="vidos" :action="URL+'/api/post/file' ...

  9. Ansible-ansible命令

    Ansible是用于执行"远程操作"的简单工具.该命令允许针对一组主机定义并运行单个任务剧本. 常用选项 说明 --ask-vault-pass 请求保险库密码 --become- ...

  10. MAC PHP7 如何disable xdebug

    1. 查看xdebug当前状态是否是enable 打开terminal,输入: php -m | grep xdebug terminal返回xdebug,说明现在xdebug是enable状态. 2 ...