{
  "$type": "site.standard.document",
  "path": "/react-containers-and-components-2/",
  "publishedAt": "2016-06-14T20:13:23.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "javascript",
    "redux"
  ],
  "textContent": "At work we've been using React heavily on one of our new projects. Like most projects we are using redux to load data from the server. In doing so testing becomes a bit more difficult. In order to make our components more testable we are using containers.\n\nYou might have heard of containers before, they are also called 'Higher Order Components'. Theses are components that wrap other components. They isolate the redux logic outside of the component doing the rendering. This makes testing the components that render your views much simpler.\n\nLets look at a practical example. Let's say you have a view that component a video's details. We'll break this into two parts. The container that loads the video from the server and the component that renders the data.\n\nFirst off we use react router to nest our views. Our router configuration would look like this.\n\n[Embedded code (GitHub Gist)]\n\nThis nests the component within the container. This ensures the container is called, it also also for simple reuse if you have other view that load the same object. Here is an example if you also had an edit view that need to load a video.\n\n[Embedded code (GitHub Gist)]\n\nNow lets look at a container. A container loads the object via an action. It connects that object to its children via props.\n\n[Embedded code (GitHub Gist)]\n\nAs you can see on componentWillMount an action is dispatched to load the video. I'm ignoring what happens in action creators, middleware and stores for this demo. If you do want to learn more about that, I suggest reading the redux docs. The container passes the video to the props of all its children.\n\nThis leaves you to only do the rendering in the component.\n\n[Embedded code (GitHub Gist)]\n\nThe component does not need to know about loading objects or redux. It's purely for rendering. This makes testing simpler as well as giving you proper separation of concerns.\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/react-containers-and-components-2/",
  "title": "React: Containers and Components"
}