1:安裝組件package如下:
"dependencies": {
"immutable": "^3.8.2",
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-navigation": "^1.0.0-beta.15",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.6"
},
2:index引入根文件:
import { AppRegistry } from 'react-native';
import App from './app/root'
AppRegistry.registerComponent('xxx', () => App);
3:root =>’./app/root’文件如下
/**
* Created by wuyunqiang on 2017/10/9.
*/
import React from 'react';
import { Provider,connect } from 'react-redux';
import { StackNavigator,TabNavigator,addNavigationHelpers,NavigationActions} from 'react-navigation';
import configureStore from './store/configure-store';//配置reduce
import rootSaga from './sagas/index';//配置sagas異步操作
import AppNavigator from './router'
const store = configureStore();
GLOBAL.Log = console.log;
store.runSaga(rootSaga);//配置數據通過saga獲取 然後通過reduce返回存儲到store中 store作爲唯一數據源
class NavigatorView extends React.Component {
render (){
//react-navigation與redux集成
return (<AppNavigator navigation={addNavigationHelpers({dispatch: this.props.dispatch, state: this.props.nav
})}/>)
}
}
/**
* 注入數據流
* **/
const mapStateToProps = state => ({
nav: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(NavigatorView);
const Root = () => (<Provider store={store}>
<AppWithNavigationState/>
</Provider>);
export default Root;
4:configure-store =>’./store/configure-store’
配置reduce數據
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';
import rootReducer from '../reducers/index';//引入根reduce
const middlewares = [];//中間插件
const { logger } = require('redux-logger');
// configuring saga middleware
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware);//放入saga中間插件
/* global __DEV__ */
if (__DEV__) {
middlewares.push(logger);
}
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
// install saga run
store.runSaga = sagaMiddleware.run;
store.close = () => store.dispatch(END);
return store;
}
5:/reducers/index =>rootReducer如下配置:
import { combineReducers } from 'redux';
import home from './home';
import xxx from './xxx';
const rootReducer = combineReducers({
nav:navigator,
home
});
export default rootReducer;
6:reducers/home裏面引入immutable如下方式
/**
* Created by wuyunqiang on 2017/10/10.
*/
import { Map,is,fromJS } from 'immutable';
const initialState = Map({//初始化數據
isRefreshing: false,
loading: true,
isLoadMore: false,
noMore: false,
data: fromJS({}),
url:'',
params:{},
clickAd:false,
});
export default function home(state = initialState, action) {
switch (action.type) {
case ActionTypes.HOME_FETCH://網絡獲取數據
return state
.set('isRefreshing',true)
.set('loading',true)
.set('isLoadMore',action.isLoadMore);
case ActionTypes.HOME_RECEIVE:
const map1 = fromJS(action.data.result);//網絡獲取
const map2 = state.get('data');//本地已經有的數據
console.log('是否更新 reduce',!is(map1,map2));
if(is(map1,map2)){
return state
.set('isRefreshing',false)
.set('loading',false)
.set('isLoadMore',false);
}
return state
.set('data',map1)
.set('isRefreshing',false)
.set('loading',false)
.set('isLoadMore',false);
case ActionTypes.HOME_NOTIFICATION://點擊事件
return state.set('clickAd',!state.get('clickAd'));
default:
return state;
}
}
7:reudcers/navigator 配置react-navigation的reudcer
import AppNavigator from '../router';
export default function navigator(state, action) {
console.log('navigator reduce',state,'action',action);
const newState = AppNavigator.router.getStateForAction(action, state);
return newState || state;
}
8:actions/home
/**
* Created by wuyunqiang on 2017/10/10.
*/
//請求數據的前發送的action
export function fetchData(isRefreshing , loading, isLoadMore = false) {
console.log('ActionTypes.HOME_FETCH');
return {
type: ActionTypes.HOME_FETCH,
isRefreshing,
loading,
isLoadMore
};
}
//請求結束 發送action
export function receiveData(data) {
console.log('ActionTypes.HOME_RECEIVE');
return {
type: ActionTypes.HOME_RECEIVE,
data,
};
}
//請求數據的action
export function requestData(url,params){
console.log('ActionTypes.HOME_REQUEST');
console.log('home url',url);
console.log('home params',params);
return {
type: ActionTypes.HOME_REQUEST,
url,
params
};
}
//請求數據的action
export function ClickNotification(){
return {
type: ActionTypes.HOME_NOTIFICATION,
};
}
9:’./sagas/index’ =>rootSaga
import { fork } from 'redux-saga/effects';
import { watchRequestData } from './project';
export default function* rootSaga() {
// yield [fork(watchRequestTypeList), fork(watchRequestArticleList)];
yield [fork(watchRequestData)];//監聽網絡請求
}
完成。
不得不說一套配置過後,可以獲取到react navigation的路由這個對於返回任意頁的問題可以得到解決,而且整體的性能也是好的很多尤其的immutable的作用很明顯。
有什麼問題歡迎各位補充。
GitHub:https://github.com/wuyunqiang/ReactNativeUtil/issues
這是本人準備做的一個工具,以及bug的庫。希望以後內容可以越來越豐富,會陸續補充在工作中遇到的有關react native的問題,歡迎大家將遇到的問題以及解決方法以issue的方式寫下來做個記錄。