zoukankan      html  css  js  c++  java
  • 使用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
  • 相关阅读:
    cordova windows环境配置
    javascript 变量声明 和 作用域
    javascript 数组总结
    处理事件的兼容写法
    javascript 闭包
    事件委托和事件绑定
    依赖注入
    .Net委托
    sql游标循环结果集
    T-Sql之集合
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/6625990.html
Copyright © 2011-2022 走看看