Witam,

próbuję utworzyć komunnikację w aplikacji poprzez redux'owy state, ale napotykam na problemy. Chcę wyświetlić modala korzystając ze state'a reduxa.

Mam zdefiniowane akcje:


export function toggle() {
    return {
        type: 'MODAL_TOGGLE',
    };
}

export function open() {
    return {
        type: 'MODAL_OPEN',
    };
}

export function close() {
    return {
        type: 'MODAL_CLOSE',
    };
}

Container:


import { connect } from 'react-redux';
import * as ModalActions from '@redux/modals/actions';
import FindHelpModalRender from './FindHelpModalView';

const mapStateToProps = state => ({
    isOpen: state.isOpen
});

const mapDispatchToProps = {
    toggleModal: ModalActions.toggle,
    openModal: ModalActions.open,
    closeModal: ModalActions.close
};

exports.FindHelpModal = connect(mapStateToProps, mapDispatchToProps)(FindHelpModalRender);

View:


import React, {Component, PropTypes} from 'react';
import {Text, StyleSheet, View, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';
import CloseButton from '@components/ui/CloseButton';

class FindHelpModalView extends Component {

    static componentName = 'FindHelpModalView';

    static propTypes = {
        isOpen: PropTypes.bool,
    };

    static defaultProps = {
        isOpen: false
    };

    constructor(props)
    {
        super(props);
        this.state = {isModalVisible: this.props.isOpen};
    }

    _showModal = () => this.setState({isModalVisible: true});

    _hideModal = () => this.setState({isModalVisible: false});

    render()
    {

        const { isOpen } = this.props;

        return (
                <View>
                    <Modal isVisible={isOpen}>
                        <View style={styles.content}>
                            <View style={styles.wrapper}>
                                <View style={styles.backgroundButton}>
                                    <CloseButton hideModal={this._hideModal.bind(this)}/>
                                </View>
                                <View style={styles.backgroundText}>
                                    <Text style={styles.text}>Whoops, that zip code doesn't
                                        look quite right</Text>
                                </View>
                            </View>
                        </View>
                    </Modal>
                </View>
        )
    }
}

const styles = StyleSheet.create({
   ...
    }
});

export default FindHelpModalView;

i z pozomu tego komponentu chcę wyświetlić tego modala:


import {StyleSheet, View, Text, Image, TextInput, TouchableHighlight} from 'react-native';
import React, {Component, PropTypes} from 'react';
import {AppStyles, AppSizes, AppFonts, AppColors} from '@theme/';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import Modal from '@containers/FindHelp/modalView/FindHelpModalContainer';
import * as ModalActions from '@redux/modals/actions';

const mapStateToProps = state => ({
    modalIsOpen: state.isOpen,
});

const mapDispatchToProps = {
    toggleModal: ModalActions.toggle,
    openModal: ModalActions.open,
    closeModal: ModalActions.close,
};

const styles = StyleSheet.create({
    ...
});

class FindHelp extends Component {

    static componentName = 'FindHelp';

    constructor(props)
    {
        super(props);
        this.state = { text: 'Enter Zip Code'};

        FindHelp.propTypes = {
            modalIsOpen: PropTypes.func.isRequired,
        };

        this.checkZipCode = () => {
            this.props.openModal();
        }
    }

    render()
    {
        return (
                <LinearGradient {...AppStyles.gradientStyle} style={[styles.background]}>
                    <Modal />
                    <View style={[styles.wrapper]}>
                        <Text style={[styles.textHead]}>FIND HELP</Text>
                        <Text style={[styles.description]}>Mental health conditions are real, common and treatable.
                            Enter your zip code below to find the nearest help today.
                        </Text>
                        <TextInput
                                style={[styles.textInput]}
                                onChangeText={(text) => this.setState({text})}
                                placeholder={this.state.text}
                                placeholderTextColor={AppColors.aquamarine}
                                maxLength={5}
                                keyboardType={'numeric'}
                                underlineColorAndroid='rgba(0,0,0,0)'
                        />
                        <TouchableHighlight
                                style={styles.submit}
                                onPress={() => this.checkZipCode()}
                                underlayColor='#fff'>
                            <Text style={[styles.submitText]}>SEARCH</Text>
                        </TouchableHighlight>
                    </View>
                </LinearGradient>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FindHelp);

pierwsze co to mam type is invalid -- expected a stringbut got object 'FindHelp'
a i na pewno coś innego pomieszałem. Właśnie coś mam problem ze zrozumieniem tego redxa, może ktoś będze wiedział gdzie jest błąd i jak to wyprostować?