redux-intro.md

React and Redux project tour

Inspired by STRV's example project https://github.com/strvcom/React-Meetup

Structure

Common structure

/components
/containers
/pages

• Components

• both actions and data are passed as props

• dumb components are easily testable

• Containers - container components

• use @connect decorator to wire redux and props

• close to no logic

• Pages - router pages

The normal way

/actions
/constants
/reducers

Less files, aka modules

/modules

• combines all parts from the above(constants, reducer and actions) in a single file

.babelrc

ES6, 7 transpiler configuration easy to forget about.

@connect

@connect(
  state => ({
    reviews: state.reviews // exposes props.reviews in decorated component
  }),
  dispatch => ({
    change(paperId, questionId, value) { // exposes props.change in decorated component
      dispatch(change(paperId, questionId, value))
    },
    submit(paperId, answers) { // exposes props.submit in decorated component
      dispatch(submit(paperId, answers))
    }
  })
)

@asyncConnect

Waits for promise to resolve before rendering.

@asyncConnect([{
  promise: ({ store: { dispatch, getState }, params }) => {
    if (!isLoadedDetail(params.paperId, getState())) {
      return dispatch(loadDetail(params.paperId))
    }
  }
},{
  promise: ({ store: { dispatch, getState }, params }) => {
    if (!isLoaded(getState())) {
      return dispatch(load())
    }
  }
}])

CSS modules

Great for component specific styles.

https://github.com/webpack/css-loader

My example project https://github.com/stlk/paper-review/tree/master/webpack

.item {
  margin: 0.5rem 0;
}

import styles from './comments.css'

<div className={styles.item}>No comments</div>

Result:

.comments__item___2XF9U {
    margin: 0.5rem 0;
}

<div class="comments__item___2XF9U">No comments</div>

Tests

https://github.com/stlk/paper-review/blob/master/webpack/test/components/PapersListItem.js

Enzyme render methods: http://airbnb.io/enzyme/docs/api/index.html