Recompose

Валерий Кузьмин, Kontur.Recognition

Екатеринбург, 2017

// элемент
React.createElement('div') 

// компонент
class Component extends React.Component {...}

// stateless компонент
const Component = (props) => {...}

// компонент высшего порядка (HOC)
const Component = () => <OtherComponent/>

 // enhancer
const enhancer = (Component) => <Component {...newProps} />

// фабрика enhancer-ов
const enhancerFabric = ({params}) => ({Component}) 
    => <Component {params} /> 

Терминология

connect(
    mapStateToProps,
    mapDispatchToProps,
)(Component)

react-redux

<Provider store={...}>
    <Component/>
</Provider>

Recompose

by Andrew Clark

"React utility belt ... Think of it like lodash for React"

"куча enhancer fabric"

9296

TS/Flow

const Component = ({field, setField}) => {...}

export default withState(
    'field', // propName
    'setField', // setterName
    '' // initial state
)(Component)

state lifting: withState

const reducer = (state, action) => { 
    if (action.type === 'ADD')
        return [...state, action.payload];  
    return state;
}

const Component = ({todos, dispatch}) => ...

export default withReducer(
    'todos', // statePropName
    'dispatch', // dispatchPropName,
    reducer,
    [] // initialState
)(Component); 

state lifting: withReducer

const Component = () => {...}

const ComponentV2 = compose(
    withState(...),
    mapProps(...),
    myEnhancer(...),
)(Component);

stateless to enhanced

const ComponentV2 = compose(
    withState(...),
    mapProps(...),
    myEnhancer(...),
    connect(mapStateToProps, mapDispatchToProps)
)(Component);

redux

const stateless = ({prop1, prop2}) => {...}

onlyUpdateForKeys(['prop1'])(stateless);


@onlyUpdateForKeys(['prop1']);
class Classy extends React.component {
    ...
}

onlyUpdateForKeys, pure

Практика

Практика

Не в этот раз

Recompose

темная сторона силы

lifecycle({
    componentDidMount() {
        this.props.setField(...);
    }
})(Component)

lifecycle

DevTools Ballooning

hint: use reassemble

render() {
    if(this.props.flag)
        return null;
    return <Component/>
}

branch(
    (props) => props.flag,
    null,
    Component,
)

branch

Наблюдения

+++

- -

• Выразительнее
• Нелегко говнокодить
• Легко шарить и добавлять фичи
• Удобно оптимизировать
• Однообразнее код
• Хорошо идет с redux
• Чуть легче тестировать

• Сложнее
• Нелегко говнокодить
• Тяжело писать монолиты
• Неудобно отлаживать *

* еще не попробовал reassemble

Спасибо за внимание!

Вопросы?

vkuzmin@kontur.ru

malcoriel

http://bit.ly/rec-frbr