Connect () не работает (без ошибок) в приложении Redux React Native - PullRequest
Новая
       9

Connect () не работает (без ошибок) в приложении Redux React Native

0 голосов
/ 14 апреля 2019

Я пытаюсь создать приложение для подсчета небольших чисел, все, что он делает, когда я нажимаю кнопку увеличения, значение счетчика увеличивается.

И я пытаюсь применить к нему 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>
    );
  }
}

1 Ответ

0 голосов
/ 14 апреля 2019

Привет, измените файл компонента на приведенный ниже код и перезапустите. Вы забыли отправить свои действия. 

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'
    }
});
...