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';//导入所有的reducer

const 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';//导入所有的reducer

const 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