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 (
      <Provider store={store}>
        <Navigator />
      </Provider>
    )
  }
}

要将自己的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')。