📝Injecting smart components / containers

source

Building pages with Storybook (webarchive)

It’s hard to scale Smart/dumb components (Container/View) pattern up to a page level because you can’t nest smart components inside presentational ones. This is especially challenging when parts of the page fetch data independently.

One of the options is to inject smart components (e.g., via context), so they can use real version in production and a mocked “smart” component for testing.

Example

// ProfilePage view component
import { useContext } from 'react';

import ProfilePageContext from './ProfilePageContext';

export const ProfilePage = ({ name, userId }) => {
  const { UserPostsContainer, UserFriendsContainer } = useContext(ProfilePageContext);

  return (
    <div>
      <h1>{name}</h1>
      <UserPostsContainer userId={userId} />
      <UserFriendsContainer userId={userId} />
    </div>
  );
};

Then you can use real implementation of containers in application, and mocked implementations for testing.

See also

• Push smart components up as much as possible should be preferable to injection (which results in less containers overall)

• Injecting container implementation per container—inject context on a different level (for each container instead of view that uses the container).

• Dependency injection

Backlinks

• 📝 Push smart components up as much as possible
• 📝 Smart/dumb components (Container/View)
• 📝 Injecting container implementation per container