描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state)
上代码:index.ios.js
import React, { Component } from 'react'; import { AppRegistry, } from 'react-native'; import { Provider } from 'react-redux'; import {createStore} from 'redux'; import APP from './app'; //创建reducer,传入初始化的状态,和需要改变的元素描述:action //初始化状态 const initialState={defaultNum:10}; function add(state=initialState,action){ console.log("2"+action.type); switch (action.type) { case "ADD_ONE": let ss=Object.assign({},state,{defaultNum:state.defaultNum-1}) return ss; default: return state; } } class test extends Component{ constructor(props){ super(props); this.state={ store:createStore(add), }; } render(){ return( <Provider store={this.state.store}> <APP store={this.state.store}/> </Provider> ); } } AppRegistry.registerComponent('test', () => test);
在上面的入口代码中,先是定义了reducer,来具体做一些事,用reducer作为参数来创建store,然后通过Provider来将store传入入口<APP/>组件中!然后看APP.js的代码:
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'react-native'; import {connect} from 'react-redux'; //action let action={type:"ADD_ONE"}; class APP extends Component { constructor(props){ super(props); this.state={ } } _onpress(){ console.log("1"+this.props.defaultNum); this.props.dispatch(action); } render() { return ( <View style={styles.container}> <Text style={styles.text} onPress={this._onpress.bind(this)}>{this.props.defaultNum}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, text:{ fontSize:40 } }); function select(state){ console.log("3"+state.defaultNum); return {defaultNum:state.defaultNum} } export default connect(select)(APP)
在APP.js代码中,我们首先定义了action(当然这些都是可以在外部写的) 然后通过文本的点击事件触发action,将这个action通过store中的dispatch分发到reducer中!那么
export default connect(select)(APP)
就是包装APP组件,将store的dispatch方法传入this.props中!
当reducer运行结束后,返回的数据由
export default connect(select)(APP)
中的select来更新当前的数据。
相关链接:http://www.jianshu.com/p/e261818be3ff