Components (UI)

React-Redux Components

The view of the application in terms of the Flux pattern are the React components under the src/components folder. Each component is defined by a .jsx file that contains the HTML and event handling JavaScript for display. And each .jsx file is accompianied with a .css file to define the styles for each component via CSS. The project utilizes the Terra UI library, which provides core components like dropdowns, headers, icons, etc for the Sandbox.

Most of the UI is built out in each components' render() method. And each component receives the data it displays via a property called props. Props is an object passed into the component where each key/value pair contains data to display. Props may also contain functions which dispatch actions to update the application state. This usually happens on event handling. An example of props looks like the object below.

{
  hook: 'patient-view',
  patientId: 'patient-id-123',
  setHook: (hook) => dispatch(setHook(hook)),
  resetServices: () => dispatch(resetServices()),
};

View Subscription

Most component files will come with a method called mapStateToProps and/or mapDispatchToProps. The first method is how Redux decides what data to transfer to the component from the application state. The function is passed a store object which contains the Redux store for the application, which can then be used to determine what data should be passed in. See the example below.

const mapStateToProps = store => ({
  hook: store.hookState.currentHook, // The current hook of the application
  patientId: store.patientState.currentPatient.id, // The current ID of the patient in context
  ...
});

Now, in the associated component, it can leverage this.props.hook to get the current hook of the application (i.e. patient-view), as well as this.props.patientId to get the ID of the patient in context. And most importantly, if any of these values change in the application state, the associated component will automatically be updated to receive the new values.

In the mapDispatchToProps function, we define the functions to dispatch actions to reducers via imported action creators. This is where we can make updates to the application state based on some UI event trigger, or otherwise. See the example below.

const mapDispatchToProps = dispatch => ({
  setHook: (hook) => {
    dispatch(setHook(hook)); // setHook is an imported action creator
  },
});

Now, in the associated component, when the Rx View tab is clicked, the component can call this.props.setHook('medication-prescribe') to set the application state's current hook from whatever it was, to medication-prescribe. And since the associated component also listens for the current hook in the mapStateToProps function, when the action gets dispatched and the state is updated, the component will update with the currentHook as medication-prescribe.

Check out the src/components/Header/header.jsx file to see how it all fits together.