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, ...props }) => (
  <div {...props}>
    {loading && <div>Loading</div>}
    {list.map((post, i) => <Post key={i} {...post} />)}
  </div>
)

export default PostList

src/containers/PostList

import { PostList } from 'components'

class PostListContainer extends Component {
  componentDidMount () {
    this.props.request()
  }

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

const mapStateToProps = (state) => ({
  list: fromPost.getList(state),
  loading: fromStatus.isLoading(state, POST_LIST)
})

const mapDispatchToProps = (dispatch, { limit }) => ({
  request: () => dispatch(postList.request(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.