Question

我正在尝试创建一个小的计数应用程序，它所做的就是当我单击“增加”时，计数器值增加。

我正在尝试将Redux应用于它，但是它不起作用。因为没有引发错误，所以我真的不知道在哪里修复。请帮忙。

提前谢谢！

我检查了store.getState（）和appReducer，它工作得很好。我认为问题是我做错了，connect（）可能无法正常工作。

/* STORE */
import { createStore } from 'redux';

const INCREASE = 'increase';
const DECREASE = 'decrease';

const increase = () => { type: INCREASE }
const decrease = () => { type: DECREASE }

const initialState = { count: 0 };

function appReducer(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return { count: state.count + 1 };
    case DECREASE:
      return { count: state.count - 1 };
  }

  return state;
}

const store = createStore(appReducer);


/* COMPONENT */

export class Main extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#4a99f9',
          }}>
          <Text
            style={{
              color: 'white',
              fontSize: 100,
              fontWeight: 'bold',
              textAlign: 'center',
            }}>
            { this.props.count }
          </Text>
        </View>

        <View
          style={{
            flex: 1,
            padding: 30,
            alignItems: 'center',
            backgroundColor: '#fff711',
          }}>
          <TouchableOpacity
            style={{
              margin: 5,
              width: 200,
              height: 50,
              backgroundColor: '#51f772',
              justifyContent: 'center',
            }}
            onPress={increase}>
            <Text
              style={{
                color: 'white',
                textAlign: 'center',
                fontWeight: 'bold',
              }}>
              Increase
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              margin: 5,
              width: 200,
              height: 50,
              backgroundColor: '#ff5c38',
              justifyContent: 'center',
            }}
            onPress={decrease}>
            <Text
              style={{
                color: 'white',
                textAlign: 'center',
                fontWeight: 'bold',
              }}>
              Decrease
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}


/* ROOT */

import { connect } from 'react-redux';

const mapStateToProps = state => { count: state.count };
const mapDispatchToProps = dispatch => {
  return {
    increase: () => dispatch(increase()) ,
    decrease: () => dispatch(decrease())
  }
};

const AppContainer = connect(mapStateToProps , mapDispatchToProps)(Main);


import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Provider } from 'react-redux';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer  />
      </Provider>
    );
  }
}

Answer 1

您好，将您的组件文件更改为以下代码，然后重新运行。您忘记了调度动作。

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {


    render() {
        return (
            <View style={styles.container}>
                <View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
                    <TouchableOpacity onPress={() => this.props.increaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Increase</Text>
                    </TouchableOpacity>
                    <Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
                    <TouchableOpacity onPress={() => this.props.decreaseCounter()}>
                        <Text style={{ fontSize: 20 }}>Decrease</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE' }),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CounterApp)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

在Redux React Native应用程序中Connect（）不起作用（没有错误）

1 个答案: