ReactNative中Redux简单使用

官方文档镇楼,谁敢放肆!!!

http://www.redux.org.cn/

再来两篇不错的博客

http://www.jianshu.com/p/2c43860b0532
http://www.jianshu.com/p/f1a3c7845bb9

至此,原理讲解结束…谢谢大家

---

在这里,不讲原理,直接上最基本的代码,小菜鸟们请看过来,大菜鸟请绕行.
Redux最基本的三样东西:action,reducer,store
先部署下资源
npm install –save redux
npm install –save react-redux
npm install –save-dev redux-devtools

第一步:配置action

import React, {Component} from 'react';import {    Text,    View} from 'react-native';import {connect, Provider} from 'react-redux';import {getStore} from './redux2/configureStore';export default class ReduxDemo extends Component {    constructor(props) {        super(props);        this.state={            store:null        }    }    componentDidMount(){        const store = getStore();        this.setState({            store:store        });    }    render() {        if(!this.state.store){            return (                <View style={{flex:1}}>                    <Text>在加载store。。。</Text>                </View>            );        }        return (            <Provider store={this.state.store}>                <View style={{flex: 1}}>                    <Counter1></Counter1>                    <Counter2></Counter2>                </View>            </Provider>        );    }}//该组件将会被redux包装class _Counter1 extends Component {    render() {        return (            <View style={{flexDirection: 'row'}}>                <Text style={{fontSize: 20, marginRight: 20}}>我的计数器:{this.props.calculate2.c}</Text>                <Text style={{fontSize: 20}} onPress={() => {                    this.props.dispatch(set(1));//dispatch会把action传给reducer(不要问我dispatch哪里来的)                }}>点击我0</Text>            </View>        )    }}//该组件将会被redux包装class _Counter2 extends Component {    render() {        return (            <View style={{flexDirection: 'row'}}>                <Text style={{fontSize: 20, marginRight: 20}}>我的计数器:{this.props.calculate2.c}</Text>                <Text style={{fontSize: 20}} onPress={() => {                    this.props.dispatch(set(1));//dispatch会把action传给reducer                }}>点击我1</Text>            </View>        )    }}//映射表,用以获取reducer处理的数据const mapState = state => {    return {        calculate2: state.calculate,//calculate得和reducer名字一致    }}//action --- 模拟数据(比如服务器返回)const set = (number) => ({    type: 'Demo',    number: number})//将_Counter1包装成Counter1(Redux来做的包装,要不Redux怎么来工作?)let Counter1 = connect(mapState)(_Counter1);let Counter2 = connect(mapState)(_Counter2);

第二步:reducer

//默认的action

const initState = {c: 0}export const calculate = (state = initState, action) => {    switch (action.type){        //ReduxDemo中调用dispatch,传递过来的action        case 'Demo':            return {c:state.c + action.number}        default:            return state;    }}

第三步:将reducer组装成reducer树

import {createStore,combineReducers,applyMiddleware} from 'redux';import {calculate} from './reducer';//导入所有的reducerconst rootReducer = combineReducers({    calculate,});let store = createStore(rootReducer);//对外提供store,在Provider(在第一步的组件中)中使用export const getStore = () => {    return store;}

至此,简单的Redux已经完成,可以下代码自己跑一下,很好理解.

将reducer组装成reducer树(中间件版)

第三步中的reducer树,为了简单理解,没有加入中间件,这里使用下带有中间件的reducer树

import {createStore,combineReducers,applyMiddleware} from 'redux';import {calculate} from './reducer';//导入所有的reducerconst rootReducer = combineReducers({    calculate,});// let store = createStore(rootReducer);// //对外提供store// export const getStore = () => {//     return store;// }const thunk = store => next => action =>    typeof action === 'function' ?        action(store.dispatch, store.getState) :        next(action)const logger = store => next => action => {    console.log('dispatching', action)    let result = next(action)    console.log('next state', store.getState())    return result}const crashReporter = store => next => action => {    try {        return next(action)    } catch (err) {        console.error('Caught an exception!', err)        Raven.captureException(err, {            extra: {                action,                state: store.getState()            }        })        throw err    }}// applyMiddleware 接收 createStore()// 并返回一个包含兼容 API 的函数。let createStoreWithMiddleware = applyMiddleware(    logger,    thunk,    crashReporter)(createStore);// let store =createStore(rootReducer);let store = createStoreWithMiddleware(rootReducer);export const getStore = () => {    return store;}

源码在此
http://download.csdn.net/download/chinajpr/9960515