How to open a modal version by reducing and responding

Question

Trying to figure out a contraction. I want to open a modal version from my home container. I try to follow some tutorials, but I don't see any errors, so I need help. I am stuck with a modal component listening or subscribing to a store. I also need to pass the payload object.

UPDATE:

trying to fix this problem, I realized that if I do not change the routes after sending, the target will not receive any details. What I did: I moved the receiveProps code from the modal component and put it in the actual route component.

    openRouteSummary(data) {
        this.props.openRouteSummary(data);
        this.replaceRoute('subdivisions')
    }    

Actions /

type.js

   export type Action =
  { type: 'OPEN_DRAWER' }
  | { type: 'CLOSE_DRAWER' }
  | { type: 'OPEN_MODAL' }

export type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any;
export type GetState = () => Object;
export type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
export type PromiseAction = Promise<Action>;

modal.js

import type {Action } from './types';

export const OPEN_MODAL = "OPEN_MODAL";

export function openModal(data): Action {
     return {
        type: OPEN_MODAL,
        payload: data,
    }
}

gearboxes /

modal.js

import type {Action } from '../actions/types';
import { OPEN_MODAL, CLOSE_MODAL} from '../actions/modal';

export type State = {
    isOpen: boolean,
    payload: Object
}

const initialState = {
    isOpen: false,
    payload: {}
};

export default function (state: State = initialState, action: Action): State {
    if (action.type === OPEN_MODAL) {
        return {
        ...state,
            payload: action.payload.data,
            isOpen: true
        };
    }
      if (action.type === CLOSE_MODAL) {
        return {
        ...state,
            isOpen: false
        };
    }
    return state;
}

Container Trucks /

home.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {openModal} from '../../actions/modal';

import Summary from './../modals/summary';

class Home extends Component {
    constructor(props) {
        super(props);


    openModal(data) {
        this.props.openModal(data);
    }

     render() {
        return (
            <Container theme={theme}>
                 <Content>
                        <Grid>
                            <Row>
                                <Col style={{ padding: 20 }}>
                                    <Button transparent onPress={() => this.openModal({ rowData: 'rowData' }) }>
                                        <Text>
                                            Open Modal
                                        </Text>
                                    </Button>
                                </Col>
                            </Row>
                        </Grid>
                 </Content>

                <Summary/>
            </Container>
        )
    }
}

function bindAction(dispatch) {
    return {
        openModal: (data) => dispatch(openModal(data))
    }
}

export default connect(null, bindAction)(Home);

modal.js

/* @flow */

'use strict';

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {openModal} from '../../actions/modal';
import Modal from 'react-native-modalbox';

class Summary extends Component {

    constructor(props) {
        super(props);

        this.state = {
            model: {}
        };
    }
    componentDidMount() {

    }

    openModal(data) {
        console.log(data)
        //this.setState({ model: data })
        this.refs.modal.open();
    }

    _close() {
        this.refs.modal.close();
    }

    render() {
        return (
            <Modal
                backdropOpacity={.8}
                style={[styles.modal, { height: 280, width: 280 }]}
                ref={"modal"}
                swipeToClose={false}
                backdropPressToClose={false}>
                <Container theme={theme}>
                    <Content padder>
                        <Grid>
                            <Row>
                                <Col style={styles.header}>
                                    <Text style={styles.headerText}>Survey Summary</Text>
                                </Col>
                            </Row>
                        </Grid>
                    </Content>
                </Container>
            </Modal>
        );
    }
}

function bindAction(dispatch) {
    return {
        openModal: (data) => dispatch(openModal(data))
    }
}

const mapStateToProps = (state) => {
    return {
        payload: state.modal.payload
    }
}

export default connect(mapStateToProps, bindAction)(Summary);

Answer 1

Modal.js componentWillReceiveProps. , openModal . , (/ ), .

: Modal.js

Modal.js. , connectix connect, . openModal closeModal, .

    /* @flow */

    'use strict';

    ....

    class Summary extends Component {
        ...
        componentWillReceiveProps(nextProps) {
            if(nextProps.modalOpen !== this.props.modalOpen) {
                if (nextProps.modalOpen) {
                    this.openModal();
                } else {
                    this.closeModal()M
                }
            }
        }

        openModal(data) {
            ...
            this.refs.modal.open();
        }

        closeModal() {
            this.refs.modal.close();
        }

        render() {
            return (
                <Modal ref={"modal"} ...>
                    ...
                </Modal>
            );
        }
    }

    const mapStateToProps = (state) => {
        return {
            modalOpen: state.modal.isOpen
        }
    }

    export default connect(mapStateToProps, { openModal, closeModal })(Summary);