reduxLifeStyle使用redux重構(gòu)(二)
前言：redux重構(gòu)(一)的時候大概講了redux的各個部分的定義，這一部分主要講解一下redux的具體使用顾画。
本文地址
項目地址
后端LeanCloud
redux 使用
1.項目目錄結(jié)構(gòu)
屏幕快照 2017-07-24 15.57.09.png
redux能用到的結(jié)構(gòu)都在圖上提現(xiàn)出來了，下面將以Login為例介紹每部分的具體內(nèi)容
2.ActionTypes - 統(tǒng)一定義了action供別處調(diào)用
export const ERROR_ACTION = 'ERROR_ACTION';
export const LOGIN_PERFORM_ACTION = 'LOGIN_PERFORM_ACTION';
export const LOGIN_ACTION = 'LOGIN_ACTION';
3.LoginAction - 事件的發(fā)起者
import NetUtil from '../utils/NetUtil';
import * as types from '../constants/ActionTypes';
import Global from '../constants/Global';
export function performLoginAction(username, password) {
return (dispatch) => {
dispatch(performLogin());
let url = Global.LOGIN + "username=" + username + "&password=" + password;
NetUtil.get(url, function (res) {
if (res.hasOwnProperty('code')) {
dispatch(errorAction(res));
} else {
dispatch(successLogin(res))
}
})
}
}
function performLogin() {
return {
type: types.LOGIN_PERFORM_ACTION
}
}
function successLogin(result) {
return {
type: types.LOGIN_ACTION,
data: result
}
}
function errorAction(result) {
return {
type: types.ERROR_ACTION,
data: result
}
}
- 首先
import我們前面定義的ActionType豁陆、Global(全局常量)帅刀、NetUtil(封裝的網(wǎng)絡(luò)請求) - 然后我們
dispatch(分發(fā))各個動作菲饼，此處我們dispatch了performLogin這一動作肾砂，然后進行網(wǎng)絡(luò)請求，根據(jù)請求成功與否我們dispatch了successLogin和errorAction這兩個動作宏悦。 - 這里的主要區(qū)別就是動作的不同镐确，這里僅僅是觸發(fā)了不同的動作，之后我們會根據(jù)不同的動作來處理不同的數(shù)據(jù)饼煞。
在這里我們根據(jù)不同的
action來選擇是否傳遞數(shù)據(jù)以供reducer使用
4.LoginReducer - 根據(jù)Action的不同來改變state(數(shù)據(jù))
import * as types from '../constants/ActionTypes';
const initialState = {
loading : false,
data:{},
status: null
};
export default function login(state = initialState, action){
switch (action.type) {
case types.LOGIN_PERFORM_ACTION:
return Object.assign({}, state, {
loading: true,
status: 'doing'
});
case types.LOGIN_ACTION:
return Object.assign({}, state, {
loading: false,
status: 'success',
data: action.data
});
case types.ERROR_ACTION:
return Object.assign({}, state, {
loading: false,
status: 'failed',
data: action.data
});
default:
return state;
}
}
- 引入
ActionType - 定義默認
state的數(shù)據(jù)結(jié)構(gòu) - 根據(jù)不同的
action修改state源葫，這里使用了ES6中的Object.assign()
這里的action.data是
LoginAction傳遞過來的
5. 頁面 -action的觸發(fā)和state的改變
import React, {Component} from 'react';
import {
StyleSheet,
View
} from 'react-native';
import Util from '../utils/Util';
import Tabs from '../containers/Tabs';
import LoadingView from '../components/LoadingView';
import {connect} from 'react-redux';
import TextButton from '../components/TextButton';
import {performLoginAction} from '../actions/LoginAction';
import Register from '../containers/Register';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
render() {
const {loginReducer} = this.props;
console.log(loginReducer);
return (
<View style={styles.container}>
</View>
)
}
componentDidUpdate() {
const {loginReducer} = this.props;
if (loginReducer.status === 'success') {
const {navigator} = this.props;
navigator.push({
name: 'Tabs',
component: Tabs
})
}
if (loginReducer.status === 'failed'){
Util.showToastCenter(loginReducer.data.error);
}
}
_login = () => {
const {navigator, dispatch} = this.props;
let username = this.state.username;
let password = this.state.password;
if (Util.isEmpty(username)) {
Util.showToastCenter('用戶名為空');
return;
}
if (Util.isEmpty(password)) {
Util.showToastCenter('密碼為空');
return;
}
dispatch(performLoginAction(username, password));
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5'
}
});
function mapStateToProps(state) {
const {loginReducer} = state;
return {
loginReducer
}
}
export default connect(mapStateToProps)(Login);
說明：這里防止篇幅過長(tou lan)特意把
Login界面和樣式給刪了.
- 首先我們導(dǎo)入
LoginAction里面的方法performLoginAction，在我們登錄的時候調(diào)用 - 當(dāng)觸發(fā)登錄動作的時候調(diào)用
performLoginAction()
這樣我們的整個流程就走通了砖瞧，但是還差最后一步息堂，當(dāng)
LoginReducer改變了state時，頁面是怎么接受數(shù)據(jù)的呢块促？這就是下面要介紹的connect
6. connect: 連接 react 組件和 store
function mapStateToProps(state) {
const {loginReducer} = state;
return {
loginReducer
}
}
export default connect(mapStateToProps)(Login);
mapStateToProps: 組件將會監(jiān)聽store的數(shù)據(jù)變化荣堰，只要store發(fā)生變化，就會回調(diào)該方法竭翠。然后我們就可以在componentWillReceiveProps() 方法中接收state的改變振坚。
到目前為止還差store中的state管理、reducer的管理
7.rootReducers
import {combineReducers} from 'redux';
import loginReducer from './LoginReducer';
import registerReducer from './RegisterReducer';
import homeReducer from './HomeReducer';
const rootReducers = combineReducers({
loginReducer,
registerReducer,
homeReducer
});
export default rootReducers;
將不同的reducer導(dǎo)入斋扰，并使用
combineReducers將他們統(tǒng)一管理
8.store
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducers from '../reducers/rootReducers';
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducers, initialState);
return store;
}
所有的
state都存儲在這里
9. Provider
import React, {Component} from 'react';
import App from '../lifeStyle/App';
import configureStore from '../lifeStyle/store/configureStore';
import {Provider} from 'react-redux';
const store = configureStore();
class root extends Component{
render(){
return(
<Provider store={store}>
<App/>
</Provider>
)
}
}
export default root;
Provider 這個模塊是作為整個 App 的容器屡拨，在你原有的 App Container 的基礎(chǔ)上再包上一層，它的工作很簡單褥实，就是接受 Redux 的 store 作為 props
梳理流程：首先是用戶行為或者程序觸發(fā)來生成不同的Action，此時根據(jù)不同的Action來生成不同的數(shù)據(jù)裂允，之后在Reducer中根據(jù)action type的不同將生成不同的state, store 中的state集合發(fā)生改變损离，并最終作用到界面上。整個過程可以理解為：UI -- > Action -- > Reducer -- > Store -- > UI, 完美的體現(xiàn)了單向數(shù)據(jù)流绝编。這有點類似于Android中的MVP模式僻澎，將業(yè)務(wù)邏輯和頁面的變化分割開來貌踏，各司其職互不干擾。
如果有疑問可以留言并統(tǒng)一回答
