reactjs – 如何使用redux和react-native打开模态

试图找出redux.我想从我的家用容器中打开一个模态.我一直在尝试按照一些教程,但我没有看到任何错误,所以我需要一些帮助.我坚持使用模态组件监听或订阅商店.我也需要传递一个有效负载对象.

更新：

试图解决这个问题我意识到,除非我在发送后更改路线,否则目标组件将不会收到任何道具.
我做了什么：我从模态组件移动了receiveProps代码并放置在实际的路由组件中.

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

操作/

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,
    }
}

减速机/

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;
}

容器/

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);

您需要连接Modal.js组件并添加componentWillReceiveProps生命周期方法.在此方法中,您将检查reducer中的openModal属性是否已更改.如果是这样,你需要采取相应的行动(打开/关闭模态),否则就忽略它.

编辑：Modal.js的示例

这就是Modal.js的样子.通过连接我的意思是使用redux的连接方法,你已经做了什么.最后一行有两个动作创建者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);