preact / redux

best practices ?

Structure

• src
  • ducks
    • timeline
    • albums
    • selection
  • targets
    • web
    • public
    • intent
    • mobile
    • desktop

Connection des composants au store

containers

redux-thunk : boilerplate

export function loadPosts(userId) {
  // Interpreted by the thunk middleware:
  return function (dispatch, getState) {
    let { posts } = getState()
    if (posts[userId]) {
      // There is cached data! Don't do anything.
      return
    }

    dispatch({
      type: 'LOAD_POSTS_REQUEST',
      userId
    })

    // Dispatch vanilla actions asynchronously
    fetch(`http://myapi.com/users/${userId}/posts`).then(
      response => dispatch({
        type: 'LOAD_POSTS_SUCCESS',
        userId,
        response
      }),
      error => dispatch({
        type: 'LOAD_POSTS_FAILURE',
        userId,
        error
      })
    )
  }
}

normalisation du store

Action creators

• fetchDocuments
• createEntity
• updateEntity
• deleteEntity
• addReferencedFiles
• fetchReferencedFiles

Selectors

• getEntity
• getEntityList

const mapStateToProps = (state, ownProps) => ({
  albums: getEntityList(state, 'io.cozy.photos.albums')
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  fetchAlbums: () => dispatch(fetchDocuments('io.cozy.photos.albums'))
})

export default connect(mapStateToProps, mapDispatchToProps)(
  withList(AlbumList)
)

withList = TODO :)

const mapStoreToProps = (state, ownProps) => ({
  album: getEntity(state, 'io.cozy.photos.albums', ownProps.params.id, {
    include: 'photos'
  })
})

export default cozyConnect(mapStoreToProps)(
  withList(AlbumList)
)

"getOrFetch" action creator