React Native 之 Redux使用教程
来源:互联网 发布:全景故宫软件 编辑:程序博客网 时间:2024/05/12 07:24
在一个普通的React Native中,如果业务逻辑不够复杂,或者state和props不需要跨越多个页面传递,也不需要相互没有父子组件等关系的组件之间传递数据,这基本就不需要使用Redux.
在之前我们也说过了,组件之间传递数据的几种方式,在组件中,通过改变state去改变组件的显示,在组件之间通过props去传递数据,如果是没有关系的组件之间,可以通过注册事件,去传递数据.
这一节主要说一下,如果我们要做一个大型的React Native,通过Redux,如何能够更好的管理好我们的数据.
管理数据的框架不是只有这一个,随便搜一下,有很多,我的项目中选择了使用它,因此,我就大概介绍一下.
首先你需要知道Redux的几个过程:以下所有内容都是本人理解,有错误之处,还请谅解.
Redux很多人都说,类似与网页版的MVC,我其实对这些都理解不太深入.
我认为Redux,主要做了这么几件事情.
reduce中初始化了所有需要的数据,然后更新数据的操作也在这里,这里指的数据都是state.
action这里面主要描述,可以做哪些操作,就是制定有哪些类型的操作可以做.
其中这个部分可以加入中间件,其实很多部分都可以加,我说的中间件是网络访问中间件,要不然这整个环节处理数据,没有办法处理网络请求,这显示是不被允许的.
首先通过dispatch发起action,在action中通过中间件进行网络请求,然后将action继续dispatch,最后根据action类型 找到reduce对应的部分,然后会执行更新state的操作,这个操作执行完之后,界面就会自动更新,其实这里面最终要的还是,我们的数据,在需要的时候怎么去用.
这里面还有一部分,就是取出所有state的数据,然后在我们需要的地方起使用.
下面大概给出各个部分的代码,方便我们更好的理解.
首先写一个action:
function setAction(args) { return { type: ActionTypes.getState, value: args };}
上面就是一个action,而我们怎么使用这个action呢,其实就是调用
dispatch(setAction(args));
其实就是调用了这么一句话,
而这个dispatch又是从哪里来的呢?
let {dispatch } = this.props;
在你的组件中,使用这句话,就拿到了dispatch,通过这个东东,就可以执行action.
执行action的时候,args这个东西,可以是赋值给仓库里state这个东东新的值,这个值不可能都是现成的,也有我们通过网络请求,拿到的JSON串.
而这个网络请求,需要我们什么时候去做呢,这时候就需要使用redux-thunk这个异步中间件.
你在store里面,把这个弄上,具体这个stroe可以这么写:
import { createStore, applyMiddleware } from 'redux';import thunkMiddleware from 'redux-thunk';import Reducer from './Reducer.js';const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);export default function Store(initialState) { const store = createStoreWithMiddleware(Reducer, initialState); return store;}
通过上面这段代码,stroe就有了,然后你要在你最外层的组件包裹一下:
具体代码如下:
import React, { Component } from 'react';import { Provider } from 'react-redux';import Main from './Main';import Store from './store.js';const store = Store();export default class index.android extends Component { constructor(props) { super(props); } render() { return ( <Provider store={ store }> <Main /> </Provider> ); }}
这样的话,我们store的容器就有了.
然后,在action里面就可以有了网络访问的东西,要不然你写在action里面会直接报错的.
具体代码如下:
function action() { return dispatch => { request.get(url, function (responseJson) { dispatch(action1(date)); } ); }}function Action1(data) { return { type: ActionTypes.getState, value: data };}dispatch(action());//这句是执行上面这个方法的.
这下大家应该明白,网络请求放的位置了.
这时候,action有了,数据有了,怎么改变store的state呢,就需要用到reduce了.
这个reduce具体咋写网上有很多,就不具体说了
大概就是设置一个初始化数据
然后根据action中的type,改变state.
改变完了就有了新的全家state.
下面说一下如何使用最新的state.
在组件的最后面写上这么一段代码:
function mapStateToProps(state) { return state;}export default connect(mapStateToProps)(JS1);
这在JS1这个组件中,就可以用了.
通过这句代码:
const { States } = this.props;
然后就可以取出你所需要的数据,比如States.data等.
执行自己的处理,操作.虽然步骤很麻烦,但是当状态混乱程度达到一定量级的时候,使用就会比原来简单.
这里不建议一个页面一个简单的状态就使用这,这会给自己增加无限大的代码量,很不值得.
- React Native 之 Redux使用教程
- React Native 之 Redux
- React-Native 之 redux 与 react-redux
- React-Native 之 redux 与 react-redux
- react-native-redux 简易教程
- react-native 之redux install
- React Native架构之Redux
- react native 中 使用 Redux
- React Native之Redux使用详解之Actions(29)
- React Native之Redux使用详解之Reducers(30)
- redux在react-native上使用(五)--redux-actions使用
- 学习react-native之加入redux
- redux在react-native中的使用
- 浅入react-native使用redux
- 在react-native中使用redux
- 在react-native中使用redux
- [React Native]Redux的基本使用方式
- [React Native]Redux的基本使用方式
- 图片的懒加载
- [Android 分享] 使用xposed来hook使用360加固的应用
- java的request中文转码
- PHP实现页面静态化——全部纯静态化
- PHP实现页面静态化——局部动态化
- React Native 之 Redux使用教程
- sklearn logistic使用
- C++(18):STL之vector初步
- linux ubuntu 12.04 添加root账号登录
- ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
- PHP 5.3、5.4、5.5、5.6 中的新特性
- PHP的单文件上传类
- 反转链表
- Android 背后的XML设置