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?

deepak prakash · Accepted Answer · 2016-09-29 00:43:36Z

2

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!

answered Sep 29, 2016 at 0:43

deepak prakash

7239 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taku · Accepted Answer · 2017-04-18 05:17:11Z

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

Michael Nakayama · Accepted Answer · 2016-09-29 00:00:29Z

0

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

answered Sep 29, 2016 at 0:00

Michael Nakayama

6862 gold badges8 silver badges20 bronze badges

1 Comment

Nicolas Durán Over a year ago

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

erik-sn · Accepted Answer · 2016-09-29 00:01:08Z

0

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

answered Sep 29, 2016 at 0:01

erik-sn

2,6001 gold badge23 silver badges39 bronze badges

Comments

Phi Nguyen · Accepted Answer · 2016-09-29 00:51:19Z

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

Collectives™ on Stack Overflow

React/redux multiple components with same container

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related