React/redux multiple components with same container

Question

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:

import App from '../components/App'
const AppScreen = connect(
 mapStateToProps,
 mapDispatchToProps
)(App)

How can I share with all components the changeScreen function?

Answer 1

create a new file actions.js, so this action can be called from anywhere. for example:

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

}

and now in you APP component ( or you could share from any other component)

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

and dispatch using bindActionCreators

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

Hope this helps!

Answer 2

Why don't you just re-use the output of connect with multiple components as such:

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

import ChangeScreen from './../Services/ChangeScreen';
import Home from './../Components/Home';
export default ChangeScreen(Home);

Containers/Modal.js

import ChangeScreen from './../Services/ChangeScreen';
import Modal from './../Components/Modal';
export default ChangeScreen(Modal);

Answer 3

When you define mapDispatchToProps, you are returning an object that is then mapped to the props of App. So in your App component, simply inspect the props and note that your function changeScreen is present. 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

• Nicolas Durán: The changeScreen function is successfuly defined in App component, what I would like to know is how to share this function accross all components without writing the same code in different containers for every component

Answer 4

You can either pass child components the connected changeScreen function in their props, or you can use mapDispatchToProps in them as well.

For example if App has a List child component:

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

Answer 5

You can use context or dependency injection to make your changeScreen function globally. The following example uses 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. you could use dependency injection pattern. Here is the doc