redux 和redux中间件使用

1.定义各类行为   action/types.js  
2．在user.js中书写action creator 的function
   根据被调用不一样的状态，将dispach用形参传递进去，根据type  dispatch不一样的信息，
3.1 在对应的userReducer中，能够拿到

3.2  在userReducer先初始化对应的属性状态，const initialState = {
    loginState: false,//是否处于登录状态
    user: null,
    isLogining: false      //是否正在登录
};
 3.3  在userReducer中用es6语法， strict import export function

 3.4在对应的fuction中，会接受state和action，
 3.5 用switch case 根据不一样的action.type 动做，来返回刚才dispatch回来的信息，改变初始化的值，redturn回去，
  这样根reducer  ----root会拿到strore里面
4 在根reducer中，用combineReducers 将各类reducer合成一个根reducer，export default出去
 5 在gerStore中，将根reducer放入中间件方法，exportdefault出去生成的store，
   这样就造成了统一的store数据源
6 在应用的根组件中，引入store和redux的provider方法，用provider方法将根组件包裹，并以属性的形式将store传递进去
7.使用时用connect方法将UI组件和对应的数据链接
const mapStateToProps = store => {
    return {
        userInfo: store.userState,
    }
}
export default connect(mapStateToProps)(Login);//必须链接，链接了才能进行数据操做


8同时，在对应的页面中引入对应的 action creator，将对应的action  creator  dispatch 出去，
loginUer这个函数中，书写了对应的业务逻辑，携带了对应的信息，这样对应的action 
根据type会将信息存入，对应的reducer会接到，

react-native使用redux.md
使用步骤

Step 1 Install

npm install --save redux
npm install --save react-redux
Step2 新建目录结构redux文件夹

    |--redux
        |--actions
            |--type.js    存放各类action的类型常量
            |--user.js    有关user的action的creator
            |--wallet.js  有关wallet的action的creator
            |--...
        |--reducers
            |--root.js    根reducer，将其它的reducer全组装起来
            |--user.js    处理有关user action的reducer
            |--wallet.js  处理有关Wallet action的reducer
            |--...
        |--store
            |--getStore.js  store的初始化
    
Step3 编写type.js和各类action.js

把各类能想到的动做写下来，好比用户的登陆、退出和钱包的建立和删除，那么先把这些type定义在type.js里
    //user
    export const USER_LOGIN="USER_LOGIN"
    export const USER_LOGOUT="USER_LOGOUT"
    ...
    
    //wallet
    export const WALLET_ADD="WALLET_ADD"
    export const WALLET_DEL="WALLET_DEL"
    ...
把具体的action和它的creator函数写出来，action的type属性是必须的，其它则是它携带的信息量。为了清楚，不一样类型分别放在不一样的js文件。
    //user.js
    import * as TYPES from './types';
    export function loginUser(user) {
    	return {
    		'type': TYPES.USER_LOGIN,
    		'user': user,
    	}
    }
    ...
    
    //wallet.js
    export function addWallet(new_wallet) {
    	return {
    		'type': TYPES.WALLET_DEL,
    		'new_wallet': new_wallet,
    	}
    }

Step3 编写相应的reducer纯函数，并将它们组合成根reducer函数

纯函数是指一样的输入必定会得到一样的输出，因此若是有相似于date.now()及math.random()一类的函数不可使用。
为了代码清楚，能够为每一种类型的action建立一个reducer。
每一个reducer接受当前状态和一个action，返回下一个状态
    //user.js
    import * as TYPES from '../actions/types';

    const initialState = {
    	someone_login: false,
    	login_user:null,          //初始无人登陆
    };
    
    export default function userReducer(state = initialState, action) {
    
    	switch (action.type) {
    		case TYPES.USER_LOGIN:
    			return {
    				someone_login: true,
    	            login_user:action.user,  //返回新状态：有人登陆，登陆者为action携带的user属性
    			};
    			break;
    
    		case TYPES.USER_LOGOUT:
    			return {
    				someone_login: false,
    	            login_user:null,  //返回新状态，无人登陆
    			};
    			break;
    		default:
    			return state;
    	}
    }
    
    //wallet.js
    import * as TYPES from '../actions/types';

    const initialState = {
    	walletList: [],   //初始钱包列表为空
    };
    
    export default function walletReducer(state = initialState, action) {
    
    	switch (action.type) {
    		case TYPES.WALLET_DELETED:
    		    //todo：循环state.walletList，根据action.address删除掉相应wallet，获得一个新的wallet,newWallet.
    
    			return {
    				walletList: newlist,
    			};
    			break;
    
    		case TYPES.WALLET_ADD:
    			var newlist = state.walletList;
    			newlist.push(action.newWallet);
    			//先进行处理，将新加入的钱包push到新列表中
    
    			return {
    				walletList: newlist,//返回新状态：加入新钱包后的钱包列表
    			};
    			break;
    		default:
    			return state;
    	}
    }
    
使用redux包的combineReducers，将reducer组合成根reducer
    import { combineReducers } from 'redux';
    import walletReducer from './wallet';
    import userReducer from './user';
    
    export default rootReducer = combineReducers({
        walletStates: walletReducer,
        userStates: userReducer,
    })
Step 4 生成惟一的store，也是app的惟一数据源

使用redux包的createStore函数，以根reducer为参数生成store
//getStore.js
    import { createStore, applyMiddleware } from 'redux';
    import rootReducer from '../reducers/root';
    
    let store = createStore(rootReducer);
    export const getStore = () => {
        return store;
    }
Step 5 在根组件上包上<Provider store={store}></Provider>

在你的根js文件上，获取以前生成的store
    let store=getStore()
-在你的根组件<Root/>外包上<Provider>并将store做为props传递给它。Provider来自于react-redux包

    <Provider store={store}>
        <Root/>
    </Provider>
Step 6 在你相关的组件上选择要关联的state并用react-redux包的connect函数connect一下

其实如今store里已经存储了你所要的state了，在前面的例子里，store.walletState就是与wallet相关的state，store.userState就是与user相关的state。（就是根reducer里的属性名）
在connect以前，先要选出要使用的state，由于不必用到所有的
    const mapStateToProps = store => {
      return {
        walletState: store.walletState,
      }
    }
而后在咱们的组件里，不要直接输出咱们已经写好的组件，而是输出connect过的组件
    import { connect } from 'react-redux';
    
    class your_component extends PureComponent {
        render(){
            return(
                ...
            )
        }
    }
    //不输出上面你写好的组件
    
    const mapStateToProps = store => {
      return {
        walletState: store.walletState,
      }
    }
    //而是输出connect过的选好state的组件
    export default connect(mapStateToProps)(your_component);

Step 7 在connect过的组件里就能够引用state和经过dispatch(action)来刷新状态和界面了

在connect过的组件里使用state
    wallet_list=this.props.walletState.walletList
在connect过的组件的某个点击事件里更新状态
    onPress={()=>{
        new_wallet={}
        new_wallet.address="xxxxxxxxxxxx"
        new_wallet.name="xxxx"
        new_wallet.privateKey="xxxx"
        this.props.dispatch(addWallet(new_wallet)
    }}
addWallet是个action creator，它生成一个action{'type':"WALLET_ADD",'new_wallet':new_wallet},携带了咱们关于new_wallet的信息。 dispatch以后呢，reducer会根据目前的state和这个action生成新的state，随后redux会刷新界面。