對React Native中Reduce理解

React Native Redux學習

1.action
進行必定的邏輯,並將處理後的結果,使用dispatch以type的形勢傳遞出去,結果在reduce裏面處理結果
2.reducers
接受Action裏面傳出的type,根據type的類型更改state的值並將值返回給
3.store
進行配置store,在程序的入口中調用,調用後reduce更新的state就會傳送到store中
store會更具傳回的state改變頁面顯示
使用:
在須要使用的頁面中使用react-redux中的connect與store進行鏈接,

/**
*在select中設置須要的state
**/
function select(store){
return {

isLoggedIn: store.userStore.isLoggedIn,
  user: store.userStore.user,

}
}
//頁面與store連接
export default connect(select)(Main);

使用步驟:
1.在項目中導入包
1>.導入react-redux
2>導入redux
3>導入redux-thunk
4>導入redux-persist
2.建立文件目錄
redux中使用的:
1>.actions
2>.store
3>.reducers

3.建立相關文件

1>.在store目錄下建立index.js

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import reducers from '../reducers';

const logger = store => next => action => {
  if(typeof action === 'function') console.log('dispatching a function');
  else console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
}

let middlewares = [
  logger,
  thunk
];

let createAppStore = applyMiddleware(...middlewares)(createStore);

export default function configureStore(onComplete: ()=>void){
  const store = autoRehydrate()(createAppStore)(reducers);
    let opt = {
      storage: AsyncStorage,
      transform: [],
      //whitelist: ['userStore'],
  };
  persistStore(store, opt, onComplete);
  return store;
}

2.建立入口文件,入口文件中使用react-redux中的Provider,在Provider中使用store

import React, { Component } from 'react';
//導入provider
import { Provider } from 'react-redux';
//導入store中的configureStore
import configureStore from './store/index';

let store = configureStore();

import Root from './root';

export default class App extends Component{
constructor(){

super();
  this.state = {
    isLoading: true,
    store: configureStore(()=>{this.setState({isLoading: false})})
  }

}
render(){

if(this.state.isLoading){
    console.log('loading app');
    return null;
  }

/**
*
*使用store
*
**/

return (
    <Provider store={this.state.store}>
        <Root />
    </Provider>
  )

}
}

3.建立Action
建立action文件

import * as TYPES from './types';

// fake user data
let testUser = {
'name': 'juju',
'age': '24',
'avatar': 'https://avatars1.githubuserco...'
};

// for skip user
let skipUser = {
'name': 'guest',
'age': 20,
'avatar': 'https://avatars1.githubuserco...',
};

// login
export function logIn(opt){
return (dispatch) => {

dispatch({'type': TYPES.LOGGED_DOING});
  let inner_get = fetch('http://www.baidu.com')
    .then((res)=>{
        dispatch({'type': TYPES.LOGGED_IN, user: testUser});
    }).catch((e)=>{
        AlertIOS.alert(e.message);
        dispatch({'type': TYPES.LOGGED_ERROR, error: e});
    });

}
}

// skip login
export function skipLogin(){
return {

'type': TYPES.LOGGED_IN,
  'user': skipUser,

}
}

// logout
export function logOut(){
return {

'type': TYPES.LOGGED_OUT

}
}

4.在頁面js中調用action

//將action導入頁面,就能夠從頁面文件中使用action中的方法
import { logIn, skipLogin } from '../actions/user';

reduce運行路線
配置store-->入口使用store

頁面中調用action->action將type發出去間接調用reduce->頁面中使用connect將頁面的state和store