SHARE
TWEET

Untitled

a guest Apr 23rd, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { StyleSheet, Text, View, Button } from "react-native";
  3. import Tea from "./Tea";
  4.  
  5. //The component's state
  6. interface Model {
  7.   count: number;
  8. }
  9.  
  10. //The Actions that this component creates
  11. type Message = "increment" | "decrement";
  12.  
  13. //The component's Props
  14. type Props = { start?: number };
  15.  
  16. class Counter extends Tea<Props, Message, Model> {
  17.   constructor(props: Props) {
  18.     const start = props.start || 0;
  19.     //initialize the model from props if defined
  20.     super(props, { count: start });
  21.   }
  22.  
  23.   //reducing over the stream of incoming messages
  24.   //exhaustive matching guaranteed by compiler
  25.   update(msg: Message, model: Model): Model {
  26.     switch (msg) {
  27.       case "increment":
  28.         return { count: model.count + 1 };
  29.       case "decrement":
  30.         return { count: model.count - 1 };
  31.     }
  32.   }
  33.  
  34.   //given a Model, return JSX
  35.   view(m: Model) {
  36.     return (
  37.       <View style={styles.counter}>
  38.         <Button title="decrement" onPress={() => this.onMsg("decrement")} />
  39.         <Text>{this.state.count}</Text>
  40.         <Button title="increment" onPress={() => this.onMsg("increment")} />
  41.       </View>
  42.     );
  43.   }
  44. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top