Советы по шаблонам React Hook

Раньше я создавал приложения, используя реакцию + mobx, делая хранилища и передавая их через провайдера и внедряя декораторы. (Некоторые из этих приложений большие, много данных, форм, сеток...)

// store.js
class Store {
    @mobx.observable counter = 0;

    @mobx.action
    increaseCounter = () => {
        this.counter++;
    }
}

// App.js
class App extends Component {
    constructor(props){
        super(props);
        this.store = new Store();
    }
    
    render(){
        return(
            <mobx.provider store={this.store}>
                <AppChildren />
            </mobx.provider>
        );
    }
}

// AppChildren.js
@mobx.inject('store')
class AppChildren extends Component {
    render(){
        const { counter, increaseCounter } = this.props.store;

        return(
            <div onClick={increaseCounter}>{counter}</div>
        );
    }
}

В этом примере, независимо от того, сколько дочерних элементов в дереве у меня есть, я всегда смогу внедрить хранилище и работать с ним БЕЗ передачи реквизитов состояния/наблюдаемых объектов вниз, и снова, и снова, и снова (это приложение его немного устарел, теперь я знаю контекст лучше).

Я пытаюсь не отставать от методологий реагирования, поэтому я читал о хуках и уже немного поиграл с ними, есть какой-то шаблон, похожий на этот, представленный выше? Есть что-то лучше этого?

Ну, если у кого-то есть совет, статья, учебник или что-то еще, я буду очень признателен!


reactjs react-hooks mobx-react
person Felipe Deitos    schedule 08.07.2020    source источник
comment
БЮР, blog.logrocket.com/use-hooks -and-context-not-react-and-redux, но эта практика не оптимизирована для обновлений состояния (к вашему сведению: twitter.com/dan_abramov/status/1109595839347990528)   -  person Horst    schedule 08.07.2020

Ответы (1)


arrow_upward
1
arrow_downward

Для функциональных компонентов вы можете использовать этот хук:

import { MobXProviderContext } from 'mobx-react'

function useStores() {
  return React.useContext(MobXProviderContext)
}


// usage

function Component() {
  const { userStore, someOtherStore} = useStores();

  return (...)
}

Вам все еще нужно передать свои магазины провайдеру mobx.

Подробнее об этом и других подходах можно узнать здесь https://mobx-react.js.org/recipes-context

person Danila    schedule 08.07.2020