Как реорганизовать этот код подключения Redux?

Question

Я хочу использовать соединение Redux и asyncConnect в компоненте без состояния (чистая функция), поэтому мне нужно реорганизовать эти декораторы класса в обычные вызовы функций.

Однако я не могу найти пример asyncConnect с подключением в любом месте.

Вот что у меня есть:

@asyncConnect([{ 
    deferred: true, 
    promise: ({ params, store: { dispatch, getState } }) => { 
    if (!isLoaded(getState())) { 
     return dispatch(loadUser(params.userID)) 
    } 
    }, 
}]) 
@connect(
    state => ({ // eslint-disable-line 
    user: state.publicData.user.data, 
    error: state.publicData.user.error, 
    loading: state.publicData.user.loading, 
    }), 
    { initializeWithKey }) 
export default class UserProfile extends Component { 
    ...stuff 
} 

Вот что мне нужно:

asyncConnect(
    someStuff, 
    connect(moreStuff) 
)(props => <div />) 

Я просто понятия не имею, как на самом деле написать это.

Answer 1

Вы можете использовать функцию compose, которую предоставляет Dan в сокращении.

import { compose } from 'redux'; 
import { connect } from 'react-redux'; 

... 

export default compose(
    asyncConnect(...), 
    connect(...) 
)(props => <div />); 

compose будет применяться справа налево.

Official documentation on compose.

---

По сути интерес это, по сути, альтернативный подход к использованию синтаксиса декоратора, который вы используете с классами. Вы можете использовать тот же подход с классами.

---

И немного советов/советов.

Реагирование сильно зависит от функциональных концепций. Это очень помогло мне, устроившись с некоторыми из них. I высоко рекомендую следующую бесплатную онлайн-книгу. Вам не нужно идти в мир Монадов, я бы сказал, что по крайней мере первые шесть глав сделают вам массивную прочность в будущем.

https://github.com/MostlyAdequate/mostly-adequate-guide