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會刷新界面。