• 使用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
  • 相关阅读:
    左孩子右兄弟的字典树
    UVA 1401 Remember the Word
    HDOJ 4770 Lights Against Dudely
    UvaLA 3938 "Ray, Pass me the dishes!"
    UVA
    Codeforces 215A A.Sereja and Coat Rack
    Codeforces 215B B.Sereja and Suffixes
    HDU 4788 Hard Disk Drive
    HDU 2095 find your present (2)
    图的连通性问题—学习笔记
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/6625990.html
Copyright © 2020-2023  润新知