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