Question

我在这个技术堆栈中非常新，但我对某些事感到困惑：

我有一个react容器，用于处理应在应用程序中向用户显示的视图：

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

并在应用程序更改当前屏幕时处理：

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

但仅与App组件“连接”connect()：

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

并使用bindActionCreators

进行调度

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的道具。因此，在您的App组件中，只需检查道具并注意您的函数changeScreen存在。这假定您已经定义了您正在进行的引用。

您可以在此处详细了解connect函数的工作原理：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Answer 4

您可以在子道具中传递子组件连接的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 }

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

使用相同容器

5 个答案: