Redux在项目中的使用
一.所使用的库：
redux ( 作用：使用redux的基础库 ，提供createStore和applyMiddleware)
react-redux ( 作用：它能让react组件从redux store读取数据 ， 并且分发action到store来更新数据 )
redux-thunk（ 作用：网络等异步任务不可或缺的中间件 ）
reduxsauce （ 作用： 提供一些基于redux代码库的工具，简化redux的使用）
二.使用步骤：
<一>集成react-redux:
1. 集成Provider:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Navigator from './AppNavigator'
import configureStore from '../../Redux/CreateStore'
import { Provider } from 'react-redux'
const store = configureStore()
export default class App extends Component <{}> {
render() {
let Global = require('../../Service/Global');
Global.store = store
return (
)
}
}
要将自己的app包含在Provider中 , redux store才会生效。
2.定义自己的组件，在自己的组件文件下使用connect关联action和state:
```
const mapStateToProps = state => {
return {
fetching: state.login.fetching,
error: state.login.error,
};
};
const mapDispatchToProps = dispatch => {
return {
attemptLogin: (username, password) =>
dispatch(LoginActions.login(username, password))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
```<二>在第一步中出现一个关键的store还没有，这步定义store:
```
import { createStore , applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './index';
export default function configureStore(){
const store = createStore(rootReducer , applyMiddleware(thunk));
return store;
}
```
store用于存储状态的
<三>在第二步中需要定义一个rootReducer,这步定义reducer:
```
import {combineReducers} from 'redux';
const rootReducer = combineReducers({
login : require('./LoginRedux').reducer,
navigator: require('./NavigatorRedux').reducer,
putinManage: require('./putinManageRedux').reducer,
});
export default rootReducer;
```rootReducer是通过combineReducers聚合众多reducer而成的一个根reducer.
<四>定义reducer和action :
action作是将数据从应用程序发送到store的信息的有效负载,他们是store唯一的信息来源,使用store.dispatch()将它们发送到store。
reducer是一个处理action的纯函数，需要根据action中的type值判断来执行不同的分支。
在使用时可以使用reduxsauce库的createReducer, createActions这两个函数创建，可以不再另外创建type字段，可以使用它默认的就行。
创建action:
```
const { Types, Creators } = createActions({
loginRequest: ['username', 'password'],//真实改变状态的action
loginSuccess: null,
loginFailure: ['error'],
//// async
////登录
login: (username, password) => {
return (dispatch, getState) => {
dispatch(Creators.loginRequest(username, password));
let params = {
username: username,
password: password,
client_id: '9',
client_secret: 'nyD3rprwbtrQPxrmAea8xmts7bdvwKcn9T4czp3Q',
grant_type: 'password',
guard: 'system',
}
NetUitl.post(api.login, params, (body) => {
//将token保存到内存
let accessToken = body.access_token
Global.accessToken = accessToken
//将token保存到硬盘
if (accessToken==null) {
dispatch(Creators.loginFailure( '获取accessToken失败' ))
return
}
Global.storage.save({
key: 'accessToken', // 注意:请不要在key中使用_下划线符号!
data: accessToken,
// 如果不指定过期时间，则会使用defaultExpires参数
// 如果设为null，则永不过期
// expires: 1000 * 60
});
//获取用户资料
dispatch(Creators.loginSuccess())
dispatch(Navigator.changeState(true))
}, ({error,errMsg}) => {
if(errMsg == null){
errMsg = "请求异常，请重试";
}
dispatch(Creators.loginFailure( errMsg ))
});
};
},
});
//导出Creators,通过Creators访问action
export default Creators;
```创建reducer:
```
//创建纯函数
// 发起请求
export const request = (state, { username, password }) => {
return {
...state,
username,
password,
fetching: true,
error: false
};
};
// 请求成功
const success = (state) => {
return {
...state,
fetching: false,
error: false,
// msg
};
};
// 请求失败
const failure = (state, { error }) => {
return {
...state,
fetching: false,
error: error
};
};
//创建一个初始状态
const INITIAL_STATE = {
username: null,
error: null,
fetching: false,
};
//创建并导出reducer
export const reducer = createReducer(INITIAL_STATE, {
[Types.LOGIN_REQUEST]: request,//Types中的值为action的键，及createActions参数中的键按大写及驼峰之前插入下划线的方式引用
[Types.LOGIN_SUCCESS]: success,
[Types.LOGIN_FAILURE]: failure,
});
```<四>改变数据及获取数据：
第一步中将对应的reducer返回的state关联到当前的组件，然后可通过"this.props.属性名"引用即可。当要发起一个行为时，也在第一步中绑定了一个方法，通过"this.props.属性函数名（参数)"即可调用。例如：this.props.attemptLogin('user' , '123456')。