-
Notifications
You must be signed in to change notification settings - Fork 13
Quickstart: Container Component
Shared components can be connect
ed to the Redux state using "containers". For more details on how presentational and container components work, see this description.
Containers can be created for any shared component, regardless of whether it comes with bundled actions and reducers. When the component exists on its own, any state management functionality (actions and reducers) is created at the page level. However, some components include corresponding scoped actions and reducers, which can be plugged into the state of a page wherever this component is used. In this way, the component remains reusable, but the boilerplate of managing its corresponding state is reduced.
Here we're going to add the component MyComponent
to the page MyPage
. To do that, we create a container, which is responsible for mapping the page's state to the presentational component MyComponent
. This component happens to come with scoped actions and reducers, so we will use those too.
MyComponentContainer.jsx
Sits here: pages/my-page/components/myComponentContainer.jsx
.
// ----- Imports ----- //
import { connect } from 'react-redux';
import MyComponent from 'containerisableComponents/myComponent/myComponent';
import { myComponentActionsFor } from 'containerisableComponents/myComponent/myComponentActions';
import type { State } from '../myPageReducer';
// ----- State Maps ----- //
function mapStateToProps(state: State) {
return {
propertyOne: state.page.mySection.propertyOne,
propertyTwo: state.page.mySection.propertyTwo,
};
}
// ----- Exports ----- //
export default connect(mapStateToProps, myComponentActionsFor('MY_SECTION'))(MyComponent);
We start by importing the shared component MyComponent
, and its corresponding actions. Then we create a function to map the page state to the component's props, with mapStateToProps
. Note that we can import the State
type from the page's reducer here, to make sure that flow checks our Redux state lookups.
The final line puts it all together, using the connect
function provided by React-Redux. It takes our state mapping, and an object containing the scoped action creators for our components. For more information on how this works see the section on Scoped Actions and Reducers in the docs.
Finally, let's look at the page reducer, to see how the component's scoped reducer fits into this:
MyPageReducer.js
// ----- Imports ----- //
import { combineReducers } from 'redux';
import {
myComponentReducerFor,
type State as MyComponentState,
} from 'containerisableComponents/myComponent/myComponentReducer';
import type { CommonState } from 'helpers/page/page';
// ----- Types ----- //
type PageState = {
mySection: MyComponentState,
};
export type State = {
common: CommonState,
page: PageState,
};
// ----- Reducer ----- //
export default combineReducers({
mySection: myComponentReducerFor('MY_SECTION'),
});
Here we import the scoped reducer for MyComponent
, and make it part of the page's reducer using Redux's combineReducers
, described here in their docs. We also retrieve the State
from the component, to make sure that flow is able to check all the types.
- Redux Glossary
- Why Redux Toolkit?
- Writing state slices with Redux Toolkit
- Handling action side effects in Redux
- Presentational and Container Components
- Scoped actions and reducers
- Server Side Rendering
- Form validation
- CI build process
- Post deployment testing
- Post deployment test runbook
- TIP Real User Testing
- Code testing and validation
- Visual testing
- Testing Apple Pay locally
- Test Users
- Deploying to CODE
- Automated IT tests
- Deploying Fastly VCL Snippets
- Archived Components
- Authentication
- Switchboard
- How to make a fake contribution
- The epic and banner
- Environments
- Tech stack
- Supported browsers
- Contributions Internationalisation
- Payment method internationalisation in Guardian Weekly
- Print fulfilment/delivery
- Updating the acquisitions model
- Runscope testing
- Scala Steward for dependency management
- Alarm Investigations
- Ticker data
- Ophan
- Quantum Metric
- [Google Tag Manager] (https://github.com/guardian/support-frontend/wiki/Google-Tag-Manager)