React + Redux. Best practices

Борис Стринжа
Front-End Developer в Clickky

1. Create-react-app tool
1. Smart and Dumb components
2. Stateful and Stateless components
3. Binding
4. ShouldComponentUpdate
5. propTypes
6. Ducks pattern
7. Memoization (reselect)
8. Middlewares
React + Redux. Best practices
План

Почему мы используем
React?

Create React apps with no build configuration.
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

To get started, edit src/App.js and save to reload

package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

npm run eject
Note: this is a one-way operation. Once you eject,
you can’t go back!

пример Dumb component

пример Smart component

Dumb
import React from 'react';
export default class Dumb extends React.Component {
selectNotificationItem = () => {
const {id} = this.props;
this.props.selectItem(id);
}
render () {
const {text, time} = this.props;
return (
<div className="item">
<span className="item__time">{time}</span>
<p className="item__text" onClick={this.selectNotificationItem}>{text}</p>
</div>
);
}
}

<div className="list">
{list.map(item => {
return (
<Dumb
key={item.id}
id={item.id}
time={item.time}
text={item.text}
selectItem={this.handleSelectItem}
/>
);
})}
</div>
List.js

Smartimport React from 'react';
import {connect} from 'react-redux';
import './App.css';
import Dumb from 'components/Dumb';
import {getNotificationsList, selectItem} from 'actions/notificatios';
class App extends React.Component {
componentWillMount() {
this.props.getNotificationsList();
}
handleSelectItem = (id) => {
}
render() {
const {list} = this.props;
return (
{list.map(item => {
return (
<Dumb key={item.id} id={item.id} time={item.time} text={item.text} selectItem={this.handleSelectItem} />
);
})}
</div>
);
}
}
const mapStateToProps = (state) => ({
list:state.notifications.list
});
export default connect(mapStateToProps, {
getNotificationsList,
selectItem
})(App);

Глупые компоненты:
1. Не зависят от остальной части приложения, например от redux actions или stores
2. Получают данные и колбэки исключительно через props
3. Имеют свой css файл
4. Изредка имеют свой state
5. Могут использовать другие глупые компоненты
Умные компоненты:
1. Оборачивает один или несколько глупых или умных компонентов
2. Хранит состояние стора и пробрасывает его как объекты в глупые компоненты
3. Вызывает redux actions и обеспечивает ими глупые компоненты в виде колбэков
4. Никогда не имеют собственных стилей
5. Редко сами выдают DOM, используйте глупые компоненты для макета

Stateful and Stateless
components

Stateful
export default class Counter extends React.Component {
state = {
count: 1
};
componentWillMount() {
this.setState({
count: this.state.count + 1
});
}
render () {
const {count} = this.state;
const {text} = this.props;
return (
<span className="item__count">{count}</span>
<p className="item__text">{text}</p>
</div>
);
}
}

Stateless
const Counter = ({addCount, text, count}) => {
return (
<span className="item__count" onClick={addCount}>
{count}
</span>
<p className="item__text">{text}</p>
</div>
);
}
export default Counter;

Bind in Render
handleSelectItem(id) {
}
render() {
return (
{list.map(item => {
return (
<div className="list__item" onClick={this.handleSelectItem.bind(this, item.id)}>
{item.text}
</div>
);
})}
</div>
);
}

}
render() {
return (
{list.map(item => {
return (
<div className="list__item" onClick={(item) => this.handleSelectItem(item.id)}>
{item.text}
</div>
);
})}
</div>
);
}
Arrow Function in Render

Bind in Constructor
constructor(props) {
super(props);
this.handleSelectItem = this.handleSelectItem.bind(this);
}
}
render() {
return (
{list.map(item => {
return (
<div key={item.id} className="list__item">
<Dumb
id={item.id}
text={item.text}
/>
</div>
);
})}
</div>
);
}

Arrow Function in Class Property
handleSelectItem = (id) => {
}
render() {
return (
{list.map(item => {
return (
<div key={item.id} className="list__item">
<Dumb
id={item.id}
text={item.text}
/>
</div>
);
})}
</div>
);
}

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
if (this.props.value !== nextProps.value) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
component

export default class Activation extends React.Component {
static propTypes = {
query: React.PropTypes.object,
activatePublisher: React.PropTypes.func,
activateAdvertiser: React.PropTypes.func,
setActivationStatus: React.PropTypes.func,
isFetching: React.PropTypes.bool.isRequired,
activationStatus: React.PropTypes.bool.isRequired,
language: React.PropTypes.string
};
render() {
const {query} = this.props;
return(
<div></div>
);
}
}
components/Activation.js

Console

import {
NOTIFICATIONS_GET_LIST_REQUEST,
NOTIFICATIONS_GET_LIST_SUCCESS,
NOTIFICATIONS_GET_LIST_FAILURE,
NOTIFICATIONS_SELECT_ITEM
} from 'constants';
export function getNotificationsList() {
return {
types: [NOTIFICATIONS_GET_LIST_REQUEST, NOTIFICATIONS_GET_LIST_SUCCESS, NOTIFICATIONS_GET_LIST_FAILURE],
url: '/api/v1.0/notifications'
}
}
export function selectItem(data) {
return {
type: NOTIFICATIONS_SELECT_ITEM,
data
}
}
actions/notifications.js

import {
NOTIFICATIONS_GET_LIST_REQUEST,
NOTIFICATIONS_GET_LIST_SUCCESS,
NOTIFICATIONS_GET_LIST_FAILURE,
NOTIFICATIONS_SELECT_ITEM
} from 'constants';
const initialState = {
list: [],
loading: false,
selected: null
};
export default (state = initialState, action = {}) => {
switch (action.type) {
case NOTIFICATIONS_GET_LIST_REQUEST:
return {
...state,
loading: true
};
case NOTIFICATIONS_GET_LIST_SUCCESS:
return {
...state,
list: actions.result,
loading: false
};
case NOTIFICATIONS_GET_LIST_FAILURE:
return {
...state,
loading: false
};
case NOTIFICATIONS_SELECT_ITEM:
return {
...state,
selected: action.data
};
default:
return state;
}
};
reducers/notifications.js

export const NOTIFICATIONS_GET_LIST_REQUEST = 'NOTIFICATIONS_GET_LIST_REQUEST';
export const NOTIFICATIONS_GET_LIST_SUCCESS = 'NOTIFICATIONS_GET_LIST_SUCCESS';
export const NOTIFICATIONS_GET_LIST_FAILURE = 'NOTIFICATIONS_GET_LIST_FAILURE';
export const NOTIFICATIONS_SELECT_ITEM = 'NOTIFICATIONS_SELECT_ITEM';
constants/index.js

// Actions
const GET_LIST_REQUEST = 'my-app/notifications/GET_LIST_REQUEST';
const GET_LIST_SUCCESS = 'my-app/notifications/GET_LIST_SUCCESS';
const GET_LIST_FAILURE = 'my-app/notifications/GET_LIST_FAILURE';
const SELECT_ITEM = 'my-app/notifications/SELECT_ITEM';
// Reducer
const initialState = {
list: [],
loading: false,
selected: null
};
export default function reducer(state = initialState, action = {}) => {
switch (action.type) {
case NOTIFICATIONS_GET_LIST_REQUEST:
return {
...state,
loading: true
};
case NOTIFICATIONS_GET_LIST_SUCCESS:
return {
...state,
list: actions.result,
loading: false
};
modules/notifications.js

case NOTIFICATIONS_GET_LIST_FAILURE:
return {
...state,
loading: false
};
case NOTIFICATIONS_SELECT_ITEM:
return {
...state,
selected: action.data
};
default:
return state;
}
};
// Actions Creators
export function getNotificationsList() {
return {
types: [GET_LIST_REQUEST, GET_LIST_SUCCESS, GET_LIST_FAILURE],
url: '/api/v1.0/notifications'
}
}
export function selectItem(data) {
return {
type: SELECT_ITEM,
data
}
}

1. MUST export default a function called reducer()
2. MUST export its action creators as functions
3. MUST have action types in the form
npm-module-or-app/reducer/ACTION_TYPE
4. MAY export its action types as UPPER_CASE, if an
external reducer needs to listen for them, or if it is a
published reusable library
Requirements

Memoization is an optimization technique used
primarily to speed up computer programs by storing
the results of expensive function calls and returning
the cached result when the same inputs occur again

import { createSelector } from 'reselect';
import {beautifyDate} from 'utils/date';
const data = (state) => state.notifications.data;
export const notificationsSelector = createSelector(
[data],
(notifications) => {
return notifications.reduce((list, item) => {
const title = beautifyDate(item.date, 'DD.MM.YYYY');
if (!list[title]) {
list[title] = [{...item}];
} else {
list[title] = [...list[title], {...item}];
}
return list;
}, {});
}
);
selectors/notifications.js

import {notificationsSelector} from 'selectors/notifications';
const mapStateToProps = (state) => ({
list: notificationsSelector(state)
});
export default connect(mapStateToProps, {})(List);
containers/Notifications/index.js

Basic middleware
const customMiddleware = store => next => action => {
if (action.type !== 'custom') {
return next(action);
}
}
export default customMiddleware;

store/index.js
import { createStore, applyMiddleware, } from 'redux'
import reducer from './reducer'
import customMiddleware from './customMiddleware'
const store = createStore(
reducer,
applyMiddleware(customMiddleware)
);

middleware/apiMiddleware.js
import { push } from 'react-router-redux';
const apiMiddleware = (store) => (next) => (action) => {
const { url, types, method, body, ...rest } = action;
const { dispatch } = store;
if (!types) {
return next(action);
}
const [REQUEST, SUCCESS, FAILURE] = types;
next({...rest, type: REQUEST});
return fetch(url, {
method: method || 'GET',
credentials: 'same-origin',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
}).then((res) => {
if (res.status >= 200 && res.status < 300) {
return res.json();
} else {
next({...rest, error: res.statusText, type: FAILURE});
if (res.status === 401) {
window.localStorage.removeItem('user');
dispatch(push('/login'));
}
return Promise.reject(new Error(res.statusText));
}
}).then(({result, ...rest}) => {
next({...rest, result, type: SUCCESS});
});
};
export default apiMiddleware;

export function getNotificationsList(data) {
return {
types: [NOTIFICATIONS_GET_LIST_REQUEST, NOTIFICATIONS_GET_LIST_SUCCESS,
NOTIFICATIONS_GET_LIST_FAILURE],
url: '/api/v1.0/notifications',
method: POST
body: data
}
}
actions/notifications.js

Делаем небольшие dumb компоненты, не боимся использовать
connect, в пользу читаемости кода
Для простого рендера используем stateless компоненты
Всегда используем propTypes
Контролируем перерендер с помощью shouldComponentUpdate
Используем мемоизацию с помощью reselect
Используем middleware
Выводы

React + Redux. Best practices

More Related Content

What's hot (20)

Similar to React + Redux. Best practices (20)

More from Clickky (20)

Recently uploaded (20)

React + Redux. Best practices