React-redux app best practice

Background & Purpose

• Flux and redux suggests more practice than eslint rules and compile-time issues.
• thunk empower developers to do anything, and overuse it in most conditions.
• To commit reasonable, maintainable and low-coupling code.

Coding practice

• Avoid use dispatch in component directly
  If we inject dispatch into components via props(mapDispatch), it couples store and the view component tree because dispatch is a part of store implementation detail. Besides, dispatching action inside component directly will require us to import action types and other store detail, making the component tree doing too much thing other than “displaying view”. The better practice is to separate action implementation and component view, such that component view doesn’t have to be aware of actions’ implementation and actions are also usable for other components in the same module.

// bad
// ComponentA.js
import { connect } from 'react-redux';
import { SPECIFIC_ACTION_TYPE } from '@/actions/types';
const ComponentA = props => (
	<button onClick={() => props.dispatch({ type: SPECIFIC_ACTION_TYPE, payload: 'xxx' })}>{props.text}</button>
);
const mapState = state => ({
	text: state.text
});
export default connect(mapState)(ComponentA);

// good
// action.js
import { SPECIFIC_ACTION_TYPE } from '@/actions/types';
export const updateContent = content => ({
	type: SPECIFIC_ACTION_TYPE,
	payload: { content }
});
// ComponentA.js
import { connect } from 'react-redux';
import { updateContent } from '@/action';
const ComponentA = props => (
	<button onClick={() => props.onClickButton('content')}>{props.text}</button>
);
const mapState = state => ({
	text: state.text
});
const mapDispatch = {
	onClickButton: updateContent
};
export default connect(mapState, mapDispatch)(ComponentA);

• Apply selectors and reselect for mapState
  Store is a place for storing data and state, but it doesn’t mean that we could only store what’s displayed on the view. Instead, store is an independent module, and it could expose interface for other module to retrieve states. This is where selectors take effects, which act as data derivation in the middle layer between store and component view. Except the advantages of encapsulation, selectors and reselect boost significant performance improvement, since they could reduce unnecessary selectors’ execution and component re-render when store’s state keep unchanged.

// bad
// reducer.js
import { SPECIFI_ACTION_TYPE } from '@/actions/types';
export default (state = { percent: 0 }, { type, payload }) => {
	switch (type) {
		case SPECIFI_ACTION_TYPE: {
			const { point } = payload;
			return {
				...state,
				percent: `${Number.parseInt(point / 100, 10)}%`
			};
		}
		default:
			return state;
	}
}
// ComponentA.js
import { connect } from 'react-redux';
const ComponentA = props => <p>{props.text}</p>;
const mapState = state => ({
	text: state.percent
});
connect(mapState, null)(ComponentA);

// good
// reducer.js
import { SPECIFI_ACTION_TYPE } from '@/actions/types';
export default (state = { point: 0 }, { type, payload }) => {
	switch (type) {
		case SPECIFI_ACTION_TYPE: {
			const { point } = payload;
			return {
				...state,
				point
			};
		}
		default:
			return state;
	}
}
// selector.js
export const selectPercent = state => `${Number.parseInt(state.point / 100, 10)}%`;
// ComponentA.js
import { connect } from 'react-redux';
const ComponentA = props => <p>{props.text}</p>;
const mapState = state => ({
	text: selectPercent(state)
});
connect(mapState, null)(ComponentA);