React/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

创建一个新的文件actions.js，所以这个动作可以从任何地方调用。例如:

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

}

和现在在你的APP组件(或者你可以从任何其他组件共享)

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

和调度使用bindactioncreator

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

希望这对你有帮助!

Answer 2

您为什么不将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);

Answer 3

当你定义mapDispatchToProps时，你返回的是一个对象，然后映射到App的props。所以在你的App组件中，只需检查props并注意到你的函数changeScreen存在。这假定您已经定义了正在使用的引用。

您可以在这里阅读更多关于连接函数如何工作的信息:https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Answer 4

您可以在子组件的props中传递连接的changeScreen函数，或者您也可以在其子组件中使用mapDispatchToProps。

例如，如果App有List子组件:

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

Answer 5

您可以使用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 }

如果你发现在每个子组件需要changeScreen功能时添加了contextTypes。你可以使用dependency injection模式。这里是doc