摘要：
最近快压，公司準備使用React Native開發(fā)一個檔案APP便瑟，我在學習了一段時間之后枯饿，結(jié)合網(wǎng)上前輩們的資料，最終整理了一份基于React Native闹炉、Redux的demo蒿赢。下面進入正題
安裝模塊
npm install --save-dev redux
npm install --save-dev react-redux
npm install --save-dev redux-logger
npm install --save-dev redux-devtools
npm install --save-dev redux-thunk
屏幕快照 2018-11-23 13.59.14.png
具體版本號如上圖所示，另渣触，React Native項目的版本號是0.57
新建ActionTypes.js文件
// 在使用redux過程中羡棵，需要給每個動作添加一個actionTypes類型
export const GET_CLASSIFIES = 'GET_CLASSIFIES';
新建CountAction.js文件，網(wǎng)絡請求一般都是放在action文件中
import {
GET_CLASSIFIES
} from './actiontypes/ActionTypes';
import {
QUERY_CLASSIFY
} from '../api/';
// 每個頁面是可以有多個action的昵观，只需要在頁面中引入就好
const getClassifies = () => {
return async (dispatch) => {
let msg = await fetch(QUERY_CLASSIFY, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}).then(response => response.json());
dispatch({
type: GET_CLASSIFIES,
data: msg
})
}
};
export {
getClassifies
}
/**
* react-redux的執(zhí)行流程：
* component -> actionCreator(data) -> reducer -> component
*/
新建RootReducer.js文件
// RootReducer中存放的是各個頁面的Reducer晾腔，推薦的做法是
// 一個頁面公用一個Reducer，便于之后的管理
// Reducer是純函數(shù)啊犬，里面不應該有過多的邏輯
import {combineReducers} from 'redux';
import CountReducer from './CountReducer';
// 取決于這里加入了多少 reducer
const RootReducer = combineReducers({
countReducer: CountReducer
});
export default RootReducer;
新建CountReducer.js文件
import {
GET_CLASSIFIES
} from '../actions/actiontypes/ActionTypes';
// 原始默認state
const defaultState = {
count: 5,
factor: 1,
data: ''
};
export default function counter(state=defaultState, action) {
switch(action.type) {
case GET_CLASSIFIES:
return {...state, count: state.count + state.factor, data: action.data};
default:
return state;
}
}
新建ConfigureStore.js文件
import {
createStore,
applyMiddleware,
compose
} from 'redux';
// redux-thunk是用來發(fā)送異步請求的中間件灼擂，用了thunk之后，
// 一般的操作是將網(wǎng)絡請求的方法放在action中
import thunk from 'redux-thunk';
// redux-logger是打印logger的中間件
import createLogger from 'redux-logger';
import RootReducer from '../reducers/RootReducer';
const configureStore = preloadState => {
// createStore(reducer, [initState, enhancer]):創(chuàng)建一個Redux Store來存放所有的
// state觉至，一個應用只能有一個store剔应。函數(shù)返回store對象.enhancer：一個中間件
return createStore(
RootReducer,
preloadState,
compose(
applyMiddleware(createLogger, thunk)
)
);
};
const store = configureStore();
export default store;
新建CountButton.js頁面
import React, {Component} from 'react';
import {
View,
Text,
Button,
FlatList,
StyleSheet
} from 'react-native';
import {connect} from 'react-redux';
import {
getClassifies
} from '../../redux/actions/CountAction';
class CountButton extends Component {
constructor(props) {
super(props);
}
_onPressDec() {
this.props.dispatch(getClassifies());
}
render() {
const {msg, data} = this.props.countReducer.data;
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
title='decrement'
onPress={() => this._onPressDec()}/>
</View>
<Text>{msg}</Text>
<FlatList
data={data}
renderItem={({item}) => <Text style={styles.item}>{item.id} {item.phone}</Text>}
keyExtractor={(item) => item.id.toString()}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 40,
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44
}
});
const mapStateToProps = state => {
const {countReducer} = state;
return {
countReducer
};
};
// 連接React組件與Redux store
export default connect(mapStateToProps)(CountButton);
總結(jié)，我這面主要是提供一份完整的demo，至于redux中的action峻贮，reducer之間的管理席怪，以及redux的實現(xiàn)原理，網(wǎng)上資料超級多纤控，請自行查找挂捻，此處不在贅述。
項目地址：https://github.com/SUNOW2/RnDemo
