SHARE
TWEET

Untitled

a guest Feb 22nd, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // `SampleApp` の実装はこれで良いと思うのだけど、
  2. // storeの変更を受けてComponentを再描画する部分の実装ができてないので動かない
  3. // store.subscribe(() => /** ??? **/) という感じ。
  4. // (reactNativeじゃなくてreactなら自分でrenderが呼べるみたいだけど、ReactNativeだとrenderを自分で呼ぶことはできない)
  5. //
  6. // なので、ここでreactとreduxを紐付けるreact-reduxの出番ぽい。
  7.  
  8. import React from 'react';
  9. import { createStore } from 'redux';
  10. import { StyleSheet, Text, TextInput, View } from 'react-native';
  11.  
  12. const initialState = {
  13.   displayText : 'init state',
  14. };
  15.  
  16. function textReducer(state = initialState, action) {
  17.   switch (action.type) {
  18.     case 'UPDATE_TEXT':
  19.       return {
  20.         ...state,
  21.         displayText: action.payload.displayText,
  22.       };
  23.     default:
  24.       return state;
  25.   }
  26. }
  27.  
  28. const store = createStore(textReducer);
  29.  
  30. const updateText = (text) => ({
  31.   type: 'UPDATE_TEXT',
  32.   payload: {
  33.     displayText: text,
  34.   }
  35. });
  36.  
  37. export function SampleApp({ store }) {
  38.   const { displayText } = store.getState();
  39.   return(
  40.     <View>
  41.       <TextInput
  42.         onChangeText={(event) => store.dispatch(updateText(event.toString()))} />
  43.       <Text>{displayText}</Text>
  44.     </View>
  45.   );
  46. }
  47.  
  48. // メモ: store.subscribe(() => render);に相当するものがないので、
  49. // ここでreact-reduxの出番
  50. export default class App extends React.Component {
  51.   render() {
  52.     return (
  53.       <View style={styles.container}>
  54.         <SampleApp store={store} />
  55.       </View>
  56.     );
  57.   }
  58. }
  59.  
  60. const styles = StyleSheet.create({
  61.   container: {
  62.     flex: 1,
  63.     backgroundColor: '#fff',
  64.     alignItems: 'center',
  65.     justifyContent: 'center',
  66.   },
  67. });
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