React Native Redux入门

运行官网Redux Demo,点击Increment一直失效,

WechatIMG1115.png
0.gif

更改react版本"react":"^16.3.0-alpha.1"改为"react":"16.5.0"能运行成功。

WX20190625-221327@2x.png
1.gif

使用Redux传值实时render。

import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { createStore, combineReducers } from 'redux';
import WelcomeScreen from './WelcomeScreen';

// A very simple reducer
function counter(state, action) {
  if (typeof state === 'undefined') {
    return 0;
  }
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
// A very simple store
let store = createStore(combineReducers({ count: counter }));
class Count extends React.Component {
  render() {
    return <Text>Count: {this.props.value}</Text>;
  }
}
// A screen!
class Counter extends React.Component {
  static navigationOptions = {
    title: 'Counter!',
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.props.count}</Text>
        <Button
          title="Increment"
          onPress={() => this.props.dispatch({ type: 'INCREMENT' })}
        />
        <Button
          title="Decrement"
          onPress={() => this.props.dispatch({ type: 'DECREMENT' })}
        />

        <Button
          title="Go to static count screen"
          onPress={() => this.props.navigation.navigate('WelcomeScreen')}
        />
      </View>
    );
  }
}
// Another screen!
class StaticCounter extends React.Component {
  static navigationOptions = {
    title: `Same number, wow!`,
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.props.count}</Text>
      </View>
    );
  }
}
// Connect the screens to Redux
let CounterContainer = connect(state => ({ count: state.count }))(Counter);
let StaticCounterContainer = connect(state => ({ count: state.count }))(StaticCounter);
let WelcomeScreenContainer = connect(state => ({count:state.count}))(WelcomeScreen);
// Create our stack navigator
let RootStack = createStackNavigator({
  Counter: CounterContainer,
  StaticCounter: StaticCounterContainer,
  WelcomeScreen:WelcomeScreenContainer
});
// And the app container
let Navigation = createAppContainer(RootStack);
// Render the app container component with the provider around it
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation />
      </Provider>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

存储在redux中的值count传递到下一个页面WelcomeScreen。

1.gif

Demo地址。