使用redux简单的实现加法运算（简单的状态改变）

描述该做啥？（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

转载于:https://www.cnblogs.com/allenxieyusheng/p/6625990.html