react native 中的redux

一、使用redux 的条件:

1、某个组件的状态,需要共享;

2、某个状态需要在任何地方都可以拿到;

3、一个组件需要改变全局状态;

4、一个组件需要改变另一个组件的状态。

redux   说明白点,其实就是一种机制,可以在同一个地方查询状态、改变状态、传播状态的变化。

二、redux 中的store

store  可以认为是一个保存数据的地方,可以看成一个容器。

通过createStore  来生成store;

通过store.getState() 拿到数据;

三、redux 中Action

View 通过Action 来改变state,它会运送数据到store。Action  是一个对象,其中type  属性是必须的,表示Action的名称。

四、redux 中的dispatch()

store.dispatch ()是View 发出Action 的唯一方法。

五、reducer

store 收到Action 以后,必须给出一个新的state,这样View 才会发生变化。这种state的计算过程就叫做reducer。

reducer 是一个纯函数,它接受Action 和当前state作为参数,返回一个新的state。

const reducer = function (state, action) {
  // ...
  return new_state;
};

实际中的运用:

import { createStore } from ‘redux‘;
const store = createStore(reducer);

  上面代码中,createStore  接受Reducer  作为参数,生成一个新的Store。以后每当store.dispatch 发送过来一个新的Action,就会自动调用reducer,得到新的state。

六、reducer  纯函数

纯函数的一个特性就是:只要是同样的输入,必定得到同样的输出。

纯函数是函数式编程的概念,必须遵守以下的一些约束:

1、不得改写参数;
2、不能调用系统I/O的API;
3、不能调用Date.now  或者Math.random ()等不纯的方法,因为每次会得到不一样的结果

reducer 函数里面不能改变state,必须返回一个全新的对象。

时间: 2024-10-31 05:35:52

react native 中的redux的相关文章

在 React Native 中使用 Redux 架构

前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也只有一个 Store,而且只用一个 state 树来管理组件的状态.随着应用逐渐变得复杂,React 将组件看成状态机的优势仿佛变成了自身的绊脚石.因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化.Redux 试图让状态的变化变得可预测.Redux

React Native中的网络请求

React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810652 /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 2016-09-28 * fetch请求数据 header 参数 response转json 请求方式 */ import React

react native中如何往服务器上传网络图片

1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址 2 let token = ''; //用户登陆后返回的token 3 /** 4 * 使用fetch实现图片上传 5 * @param {string} url 接口地址 6 * @param {JSON} params body的请求参数 7 * @return 返回Promise 8 */ 9 function uploadImage(url,params){ 10 return

react native中Unable to load script from assets 'index.android.bundle'解决方案

刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个解决方案,分享一下. 解决这个问题的方案是: 进入你该项目的根目录下的 android目录下的app目录下的src文件下的mian文件,(可能说的有点绕),在main件夹下,创建一个assets文件,这个文件是rn的资源文件夹! 之后用dos进入你的项目根目录,执行一下命令: react-nativ

React Native 中 component 生命周期

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创) React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映

[转] 在React Native中使用ART

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中

Facebook React Native 中文教程一:介绍

React Native 中文版 Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大会上推出了基于 JavaScript 的开源框架 [React Native](http://facebook.github.io/react-native/),本中文教程翻译自 [React Native 官方文档](http://facebook.github.io/react-native/docs/getting-started.html

react native中一次错误排查 Error:Error: Duplicate resources

最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate resources”,什么意思呢,就是打包资源有重复,后来查看了一下,发现打包到android/app/src目录下的静态文件重名了. 重现步骤: 1:通过vscode打开项目,运行打包命令 react-native ram-bundle --entry-file index.js --platfo

在 React Native 中使用 moment.js 無法載入語系檔案

moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以只寫 moment().get('year'),可讀性增強許多. 問題 React Native 0.29.x 預設使用 ES6,並支援 import 語法.問題出在如果遵照官方網站的說明去載入語系檔,會發生找不到模組 (cannot find module) 的錯誤.推測可能是 moment.js