中文文档地址:https://www.redux.org.cn/
导包：
npm install redux-thunk//这个是用来支持发送异步的action，常见如网络请求：请求前触发请求中的action，等请求拿到回调再去触发请求成功和失败的actionnpm install --save react-reduxnpm install --save redux一：三个主要概念：Action、Reducer和store
store：所有的state全部在这里面,只可读，无法修改；
Reducer:页面触发不同的action来返回不同的state，他是实际操作state的；
Action:用来触发Reducer返回的，类似后台的接口
Redux的关键方法：
dispatch(ShopAction.add_goods(goods))
这个方法就是将action发送到store里面的reducer里面，store是必须唯一的，但是reducer可以是多个:
//这个表示把多个reducer连接起来，
const rootReducer = combineReducers({
LoginReducer: LoginReducer,
ShopReducer:ShopReducer,
});二.react-redux
只使用Redux是不会自动帮你刷新页面的，他只是一个类似于数据服务的东西，就像后台接口，你给他什么他给你返回对应的，但是你页面展示的变更，则需要你自己来实现，所以需要state与Redux建立关系则需要React-redux。
React-Redux的关键：connect
import {connect} from 'react-redux'; // 引入connect函数这个connect是用来将你reducer里面的的state关联你当前页面的props中的属性，从而实现动态刷新。
export default connect(
(state) => ({
status: state.LoginReducer.status,
responsedUserMessage: state.LoginReducer.responsedUserMessage,
hadAddedGoods:state.ShopReducer.hadAddedGoods,
}),
(dispatch) => ({
login: () => dispatch(LoginAction.login()),
addGoods:(goods)=>{dispatch(ShopAction.add_goods(goods))}
})
)(GoodsPage)上面的例子中，(state)表示我当前页面的props中的status即是store中的status，下面的（dispatch）表示将这个方法放到props里面，为什么不能在页面需要的地方调用dispatch({type:'type'}):(注:这里就是发送action到reducer,而action实际上是个对象。)呢，因为你在页面里面是拿不到这个dispatch对象的。最后的Frament1表示这个connect和Fragment1进行管理，如果你第二个页面也用这个reducer，那第二个页面的connect继续使用这个reducer即可
使用时调用this.props.methodName()即可。
三：适用场景：
某个页面的state会在多个页面进行关联使用，如对A页面state的增删改会影响页面B的显示
四：例子
最简单的应用场景：
以Android为例，ViewPage里面有3个Fragment，可以联想天猫。
Fragment1是用户可见的第一个页面，这个页面包含用户信息和加入购物车；
Fragment2是购物车页面，用户在Fragment1添加到购物车的需要在这里进行显示；
Fragment3是用户信息页面，如果用户在Fragment3登录了则Fragment1需要显示用户信息，否则就提示登录，而且该页面附带退出功能，退出后Fragment1的登录状态也需要改变。
分析：如果是原生开发，那么当页面重新显示的时候回调用某个方法，在这个方法对本地存储的数据进行读取展示即可。但是RN中页面重新进入并不会触发任何方法，所以这个行不通。
第一种：RN所有显示均依赖于你自己设置的state，能做的就是当Fragment1触发了加入购物车就实时更新Fragment3中的state，这里可以使用广播也可以使用导航器来传值，但是系统开销大而且不便于维护。
第二种：在global中存储你的数据，把global的数据作为显示源，也是可以的
使用Redux：
注:这个例子是参考以下例子：
https://github.com/NextChampion/react-native-redux-navigation-example
这个例子的源代码在
https://github.com/15539158137/Redux_Demo
实际执行效果:
这里分为了二部分部分：用户是否登录以及用户信息和购物车信息
为了方便区分，我使用了两个action文件和2个reducer文件，分别对应用户和购物车。下面代码只展示用户对应的这部分
LoginTypes.js：定义登录所需的action的type信息
//这里是为了方便后期维护吧所有的type单独拉出来，直接用字符串传也无所谓
//其实error和out触发的reducer是相同的，但是为了理解，分开
export const LOGIN_IN = 'LOGIN_IN';
export const LOGIN_IN_ERROR = 'LOGIN_IN_ERROR';
export const LOGIN_OUT = 'LOGIN_OUT';
LoginAction.js:action是一个对象，必须包含‘type’字段，可以按需求添加其他字段
import * as LoginTypes from '../types/LoginTypes';
//登录失败
export function loginFail() {
return {
type: LoginTypes.LOGIN_IN_ERROR,
}
}
//登录成功
export function login_in(responseData) {
return {
type: LoginTypes.LOGIN_IN,
responsedUserMessage: responseData,
}
}
//注销登录
export function login_out() {
return {
type: LoginTypes.LOGIN_OUT
}
}
//如果登录过程中需要显示加载框、提示框，最好把这个操作放在所在页面，因为上传中等等是所在页面独有的state，否则处理弹出框等等很麻烦
export function login() {
console.log('登录方法');
return dispatch => {
// 模拟用户登录
let result = fetch('https://www.baidu.com/')
.then((res) => {
//如果登录接口返回成功，那么把返回的json返回回去
dispatch(login_in({
name: '小明',
age: 12,
image: '..',
}));
}).catch((e) => {
//如果失败，把错误返回回去。
dispatch(loginFail());
})
}
}LoginReducer.js:是个方法，在方法里面对不同的action返回不同的数据
import * as LoginTypes from "../types/LoginTypes";
//这里只存储需要全局处理的数据，页面独有的state如input内容的state就在本身的页面使用。
const initialState = {
status: '离线',//表示当前的登录状态，在线离线两种状态==用0和1当然更好了
responsedUserMessage: null,//登录后的用户信息
}
export default function LoginReducer(state=initialState, action) {
switch (action.type) {
case LoginTypes.LOGIN_IN:
return {
...state,
status: '在线',
responsedUserMessage: action.responsedUserMessage,
}
break;
case LoginTypes.LOGIN_IN_ERROR:
return {
...state,
status: '离线',
responsedUserMessage: null,
}
break;
case LoginTypes.LOGIN_OUT:
return {
...state,
status: '离线',
responsedUserMessage: null,
}
break;
default:
console.log(state);
return state;
}
}
Fragment1.js
'use strict';
import {Provider} from 'react-redux';
import React, {Component} from 'react';
import {connect} from 'react-redux'; // 引入connect函数
import *as LoginAction from '../actions/LoginAction'; // 引入connect函数
import *as ShopAction from '../actions/ShopAction'; // 引入connect函数
import {Platform, Alert,StyleSheet, Text, View, TouchableOpacity} from 'react-native';
const Dimensions = require('Dimensions'); //必须要写这一行，否则报错，无法找到这个变量
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
class GoodsPage extends React.Component {
render() {
const {login}=this.props;//这是js解构赋值的写法等同于this.props.login
let bean1= {'type':"LOGIN_IN_DOING"};
let bean= {type:"LOGIN_IN_DOING"};
return (
<View style={{marginTop:60,alignItems:'center',justifyContent:'center'}}>
<Text>{this.props.status=="在线"?"欢迎你:"+this.props.responsedUserMessage.name:'请登录'}</Text>
<TouchableOpacity style={{
marginTop:10,
justifyContent:'center',
alignItems:'center',
width:ScreenWidth*0.9,height:0.1*ScreenHeight,
borderRadius:5,
borderColor:'red',
backgroundColor:'gray'
}} onPress={()=>{
let goods={name:'商品1:购买毫秒数'+new Date().getTime(),type:0};
this.props.addGoods(goods);
}}>
<Text>添加商品1到购物车</Text>
</TouchableOpacity>
<TouchableOpacity style={{
marginTop:20,
justifyContent:'center',
alignItems:'center',
width:ScreenWidth*0.9,height:0.1*ScreenHeight,
borderRadius:5,
borderColor:'red',
backgroundColor:'#005AB5'
}} onPress={()=>{
let goods={name:'商品2:购买毫秒数'+new Date().getTime(),type:1};
this.props.addGoods(goods);
}}>
<Text>添加商品2到购物车</Text>
</TouchableOpacity>
</View>
);
}
shouldComponentUpdate(nextProps, nextState) {
console.log("新的信息store里面的fragment2reducer"+JSON.stringify(nextProps.data));
// 登录完成,切成功登录
if (nextProps.status === '登陆成功' && nextProps.isSuccess) {
return true;
}
return true;
}
};
export default connect(
(state) => ({
status: state.LoginReducer.status,
responsedUserMessage: state.LoginReducer.responsedUserMessage,
hadAddedGoods:state.ShopReducer.hadAddedGoods,
}),
(dispatch) => ({
login: () => dispatch(LoginAction.login()),
addGoods:(goods)=>{dispatch(ShopAction.add_goods(goods))}
})
)(GoodsPage)注意：关键点在于connect方法，我这个页面同时使用了LoginReducer和ShopReducer
RootReducer.js:将两个reducer合并
import { combineReducers } from 'redux';
import LoginReducer from './LoginReducer';
import ShopReducer from './ShopReducer';
//这个表示把多个reducer连接起来，
const rootReducer = combineReducers({
LoginReducer: LoginReducer,
ShopReducer:ShopReducer,
});
export default rootReducer;store.js:这里是创建store的方法
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from "../../my_redux_test/reducers/RootReducer";
//这里是因为使用了redux-truk的缘故，如果不用，就使用store.createStore即可
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState)
return store;
}