Реакция/предпочтение-без гражданства-функция против декораторов класса?

Question

Итак, я создаю новый проект React и обновил все свои отпечатки до последних версий.

Это вызвало некоторые обрывы эскинтов в проекте, поэтому я просматриваю и исправляю их.

Кажется, что я столкнулся с противоречивыми правилами. Функция React/prefer-stateless пытается сказать мне написать мой компонент как чистую функцию, но если я это сделаю, я больше не могу использовать декораторы для подключения моего компонента к моему магазину Redux.

Как люди обойти это? Этот компонент является «немым» компонентом (например, только реквизитом, без состояния), поэтому честно его следует записывать как чистую функцию, но затем я теряю возможность подключить его к моему магазину через @asyncConnect и @connect. Компонент

Класс с декораторами:

@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 
} 

чисто функциональный элемент:

// How can I use decorators? 
export default function UserProfile(props) { 
    ...stuff 
} 

Случай двух декораторов Комбинированный:

@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 
} 

Answer 1

Redux не нуждается в декораторах для работы, connect - это действительно просто функция. Вы можете использовать его как это:

export default connect(mapStateToProps)(props => <div />)