Containers

ARc uses a very straight forward approach to Redux: all components should be as pure as possible and should be placed in the components folder.

If, for some reason, you need to connect a component to the store, just create a container with the same name, import the pure component and connect it. Thus having a nice separation of concerns. Do not add any extra styles or another presentational logic on containers.

You can refer to this thread on Twitter:

Example:

src/components/organisms/PostList

// just presentational logic
const PostList = ({ list, loading, failed, ...props }) => {
  return (
    <Wrapper {...props}>
      {!list.length && loading && <div>Loading</div>}
      {failed && <div>Something went wrong while fetching posts. Please, try again later.</div>}
      {list.map(post => <Post key={post.id} {...post} />)}
    </Wrapper>
  )
}

export default PostList

src/containers/PostList

import { PostList } from 'components'

class PostListContainer extends Component {
  static propTypes = {
    list: PropTypes.arrayOf(PropTypes.object).isRequired,
    limit: PropTypes.number,
    loading: PropTypes.bool,
    failed: PropTypes.bool,
    readList: PropTypes.func.isRequired,
  }

  static defaultProps = {
    limit: 20,
  }

  componentWillMount() {
    this.props.readList()
  }

  render() {
    const { list, loading, failed } = this.props
    return <PostList {...{ list, loading, failed }} />
  }
}

const mapStateToProps = state => ({
  list: fromEntities.getList(state, 'posts', fromResource.getList(state, 'posts')),
  loading: isPending(state, 'postsListRead'),
  failed: hasFailed(state, 'postsListRead'),
})

const mapDispatchToProps = (dispatch, { limit }) => ({
  readList: () => dispatch(resourceListReadRequest('posts', { _limit: limit })),
})

export default connect(mapStateToProps, mapDispatchToProps)(PostListContainer)

src/components/elsewhere

import { PostList } from 'containers'

<PostList limit={15} />

This approach makes it easier to transform any pure component into a container at any time.