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