如何使用redux＆react-native打開模式

Question

試圖找出redux。我想從我的家用容器打開一個模式。我一直在試圖遵循一些教程，但我沒有看到任何錯誤，所以我需要一些幫助。我堅持使用模塊組件監聽或訂閱商店。我也需要傳遞一個有效載荷對象。

UPDATE：

試圖解決這個我意識到，除非我做調度後更改途徑目標組件將不會收到任何道具。 我做了什麼：我從模態組件移動了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); 

Answer 1

您需要連接Modal.js成分，並添加componentWillReceiveProps生命週期的方法。在這種方法中，您檢查減速器的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);