使用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