陣營與同一容器/ Redux的多個組件

Question

我在這個技術棧很新的，但我感到困惑的事：

我有處理應該顯示什麼，以便用戶在應用一個反應容器：

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

並且還處理時，應用程序應該改變當前畫面：

const mapDispatchToProps = (dispatch) => { 
    return { 
    changeScreen: (newScreen) => { 
     dispatch(changeScreen(newScreen)) 
    } 
    } 
} 

但 「連接」 connect()僅與App組分：

import App from '../components/App' 

const AppScreen = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App) 

如何與所有組件共享changeScreen函數？

Answer 1

當您定義mapDispatchToProps時，您將返回一個對象，然後映射到App的道具。因此，在您的App組件中，只需檢查道具並注意您的功能changeScreen存在。這假設你已經定義了你正在做的引用。

你可以閱讀更多關於連接功能如何在這裏工作：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Answer 2

您可以通過子組件的連接changeScreen功能在他們的道具，或者你可以在其中使用mapDispatchToProps爲好。

例如，如果App有List子組件：

<List changeScreen={this.props.changeScreen} /> 

Answer 3

創建一個新的文件actions.js，所以這個動作可以在任何地方調用。 例如：

export function changeScreen(newScreen){ 
    return({ 
     your code here.... 
    }); 

}

你

，現在APP組件（或者你可以從任何其他組件共享）

import { changeScreen } from './actions'; 
import { bindActionCreators } from 'redux'; 

，並使用調度bindActionCreators

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ changeScreen }, dispatch); 
} 

希望這可以幫助！

Answer 4

您可以使用context或dependency injection使您的changeScreen function全球。以下示例使用context。

class App extends React.Component { 
    getChildContext(){ 
     // assume you use <Provider> component from react-redux 
     const {dispatch} = this.context.store; 
     const {currentScreen} = this.props; // assume you pass state to props if not 
              // use this.context.store.getState().currentScreen instead. 
     return { 
      changeScreen: (newScreen) => { 
      dispatch(changeScreen(currentScreen)); 
      } 
     } 
    } 
.... 
} 
App.childContextTypes = { store : React.PropTypes.object } 
// in child component 
class Child extends React.Component { 
// call this.context.changeScreen anywhere inside your child component 
    someMehod(argument){ 
    this.context.changeScreen(argument); 
    } 
} 
Child.contextTypes = { store : React.PropTypes.object } 

如果發現添加contextTypes到每個子組件時，它需要changeScreen功能。你可以使用dependency injection模式。這裏是doc

Answer 5

你爲什麼不只是重新使用的connect輸出與多個組件，例如：

服務/ ChangeScreen。JS

// I'm using `Services` to differentiate from 
// `Containers` which couples and exports components 

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

function mapStateToProps(state) { 
    return { 
    currentScreen: state.currentScreen 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    changeScreen: (newScreen) => { 
     dispatch(changeScreen(newScreen)) 
    } 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps); 

集裝箱/ Home.js

import ChangeScreen from './../Services/ChangeScreen'; 
import Home from './../Components/Home'; 

export default ChangeScreen(Home); 

集裝箱/ Modal.js

import ChangeScreen from './../Services/ChangeScreen'; 
import Modal from './../Components/Modal'; 

export default ChangeScreen(Modal);