Как отправить состояние в компоненте класса, используя React-redux?

Question

Я пытаюсь разобраться с Redux.

Вот MainMap. js:

import React from 'react';
import { 
    TouchableWithoutFeedback,
    StyleSheet,
    Keyboard,
    PermissionsAndroid,
    Platform, 
    View,
    Button,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Text
} from 'react-native';


import * as placeAction from '../../store/actions/place/place';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';


class MainMap extends React.Component{

    constructor(props){
        super(props);

        this.state={
            //....
            destinationName: [],
            destinationAddress: [],
            //...
        };

        //......

        this.addPlaceHandle = this.addPlaceHandle.bind(this)
    };
    //....


    // Dispatch a place
    addPlaceHandle(name, address){
        this.props.addingPlace(name, address);
    }

    render(){
        const {container, map, listOfSearchBars, buttonView, button, next} = styles
        const { destinationCoords, userLatitude, userLongitude, initial_UserLatitude, initial_UserLongitude } = this.state;
        //....
            return(
                <TouchableWithoutFeedback onPress={this.hideKeyboard} >
                    <View style={container} >

                        <View style={buttonView}>
                            <TouchableOpacity style={button} onPress={() => {
                                this.addPlaceHandle(this.state.destinationName, this.state.destinationAddress);

                            }}>
                                <Text style={next}>Next</Text>
                            </TouchableOpacity>
                        </View>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            )
        }

        componentWillUnmount(){
            Geolocation.clearWatch(this.watch_location_id);
        }

    }

//}

const styles = StyleSheet.create({
    container:{
        flex: 1
    },
    map:{
        ...StyleSheet.absoluteFillObject
    },
    listOfSearchBars:{
        ...
    },
    buttonView:{
        ...
    },
    button:{
        ...
    },
    next: {
        ...
    }
});


const mapDispatchToProps = (dispatch) => ({
    addingPlace: (_name, _address) => dispatch(placeAction.addPlace(_name, _address))
})

export default connect(null, mapDispatchToProps)(MainMap)

По сути, MainMap.js похоже на Google Map. Вы ищете местоположение, выбираете его из предложений, и оно покажет вам направление.

После загрузки функций async / await и this.setState(), имени и адреса из выбранного нами местоположения будут добавлены к this.state.destinationName и this.state.destinationAddress соответственно.

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

место. js в действия :

export const ADD_PLACE = 'ADD_PLACE';

export const addPlace = (name, address) => {
    return {
        type: ADD_PLACE,
        placeData: {
            name: name,
            address: address
        }
    };
};

Вот место. js в редукторах :

import { ADD_PLACE } from '../../actions/place/place';
import Place from '../../../src/models/place';

const initialState = {
    places: []
};

export default (state = initialState, action) => {
    switch(action.type){
        case ADD_PLACE:
            const newPlace = new Place(
                action.placeData.name, 
                action.placeData.address
            );
            return {
                places: state.places.concat(newPlace)
            };
        default: return state;
    }
}

Но я получаю эту ошибку, когда нажимаю кнопку:

Любые ответы и рекомендуемые ресурсы высоко ценятся!

Answer 1

Проблема в том, что я неправильно набрал import Place Это должно быть:

import {Place} from ''

Спасибо @hussain за помощь