[英]React/redux multiple components with same container
I'm very new in this technology stack but i'm confused about something: 我是这个技术堆栈中的新手,但是我对某些事情感到困惑:
I have a react container that handle what view should be shown to the user in the app: 我有一个反应容器,可以处理应在应用程序中向用户显示的视图:
const mapStateToProps = (state) => {
return {
currentScreen: state.currentScreen
}
}
and also handle when the app should change the current screen: 并处理应用何时更改当前屏幕:
const mapDispatchToProps = (dispatch) => {
return {
changeScreen: (newScreen) => {
dispatch(changeScreen(newScreen))
}
}
}
but is "connected" connect() only with App component: 但仅与App组件“连接” connect() :
import App from '../components/App'
const AppScreen = connect(
mapStateToProps,
mapDispatchToProps
)(App)
How can I share with all components the changeScreen
function? 如何与所有组件共享changeScreen
功能?
create a new file actions.js, so this action can be called from anywhere. 创建一个新文件actions.js,以便可以从任何地方调用此动作。 for example: 例如:
export function changeScreen(newScreen){
return({
your code here....
});
} }
and now in you APP component ( or you could share from any other component) 现在在您的APP组件中(或者您可以与其他任何组件共享)
import { changeScreen } from './actions';
import { bindActionCreators } from 'redux';
and dispatch using bindActionCreators 并使用bindActionCreators调度
function mapDispatchToProps(dispatch){
return bindActionCreators({ changeScreen }, dispatch);
}
Hope this helps! 希望这可以帮助!
Why don't you just re-use the output of connect
with multiple components as such: 您为什么不只重复使用connect
与多个组件的输出:
Services/ChangeScreen.js 服务/ 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);
Containers/Home.js 集装箱/ Home.js
import ChangeScreen from './../Services/ChangeScreen';
import Home from './../Components/Home';
export default ChangeScreen(Home);
Containers/Modal.js 集装箱/ Modal.js
import ChangeScreen from './../Services/ChangeScreen';
import Modal from './../Components/Modal';
export default ChangeScreen(Modal);
When you define mapDispatchToProps, you are returning an object that is then mapped to the props of App. 定义mapDispatchToProps时,您将返回一个对象,该对象随后映射到App的props。 So in your App component, simply inspect the props and note that your function changeScreen is present. 因此,在您的App组件中,只需检查一下道具并注意您的功能changeScreen存在。 This assumes that you've defined the references you are making. 假设您已经定义了要创建的引用。
You can read more about how the connect function works here: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options 您可以在此处详细了解connect函数的工作方式: https : //github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
You can either pass child components the connected changeScreen
function in their props, or you can use mapDispatchToProps in them as well. 您可以将子组件中连接的changeScreen
函数传递给它们的道具,也可以在它们中使用mapDispatchToProps。
For example if App
has a List
child component: 例如,如果App
具有“ List
子级组件:
<List changeScreen={this.props.changeScreen} />
You can use context
or dependency injection
to make your changeScreen function
globally. 您可以使用context
或dependency injection
来使您的changeScreen function
全局changeScreen function
。 The following example uses context
. 以下示例使用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 }
If you find adding contextTypes
to every child component when it needs changeScreen
function. 如果在需要changeScreen
函数时发现将contextTypes
添加到每个子组件。 you could use dependency injection
pattern. 您可以使用dependency injection
模式。 Here is the doc 这是文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.