В этой статье мы разберём основы React Redux, точнее как работать с Redux связки с React.
Также стоит сказать, что мы уже писали статью где рассказывали про Redux в отрыве от React.js, называться «Основы Redux», сначала вам стоит прочитать её, так как здесь не будет много про сам Redux, а только про то, как с ним работать на React.
Установка Redux для React:
Для начала давайте разберём, как происходит установка Redux для React, тут вам нужно сначала скачать сам Redux, а потом уже специальный.
Для этого вводите эти команды:
1 2 | npm install --save redux npm install --save react-redux |
То есть здесь сделали всё так, как я сказал выше, но если вы используете TypeScript, то вам для скачивания нужно использовать не много другую команды, вот она:
1 | npm install --save @types/react-redux |
Ну и конечно же надо скачать сам React, как это сделать, вы можете посмотреть по этой ссылке.
React Redux основы:
Теперь перейдём к основам, первым делом нам нужно подключить все зависимости, вот как мы их подключаем:
1 2 3 4 5 6 7 | import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import store from './store' import App from './App' |
Как видите сначала мы подключаем React и React-dom, после берём компонент Provider, от react-redux и также импортируем наш store, который мы создали за кадром, и основной компонент App.
Дальше создадим обычный React элемент, но не много по-другому, вот что мы сделаем:
1 2 3 4 5 6 7 | const rootElement = document.getElementById('root') ReactDOM.render( <Provider store={store}> <App /> </Provider>, rootElement ) |
Тут мы сделали рендеринг React компонентов, но мы наш компонент в котором будет происходить вся логика завернули React-readux компонент Provider.
Этот компонент похоже на React компонент Context, только для Redux, суть в том, что он позволяет использовать состояние которое он нам даёт на многих уровнях, то есть, вы сможете использовать его не только внутри компонента App, но в тех компонентах, которые внутри этого компонента, и даже в компонентах, компонентах App, то есть везде.
Следующее давайте доработаем компонент App сделаем его на подобие как из прошлой части, то есть просто будет число, которое мы будем увеличивать или уменьшать на один.
Примечание:
Повторюсь, здесь мы не будем рассматривать работу Redux, мы покажем только как он работает в паре c React.
Если хотите знать как работать с Redux, то почитайте статью «Основы Redux»
Я вам сейчас покажу не большой код, в котором я сделал классовый компонент React, вот он:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import React from 'react' import { connect } from 'react-redux' import { decrement, increment } from './redux/actions' class App extends React.Component { constructor(props) { super(props) } increment() { this.props.increment() } decrement() { this.props.decrement() } render() { return ( <> <div> {this.props.counter} </div> <div> <button onClick={this.increment.bind(this)}> increment </button> <button onClick={this.decrement.bind(this)}> decrement </button> </div> </> ) } } const mapDispatchToProps = { increment, decrement } const mapStateToProps = state => ( () => { return { counter: state.counter, } }) export default connect(mapStateToProps, mapDispatchToProps)(App) |
Как видите в начале как обычно мы подключаем все зависимости, это React, connect от react-redux, о нём чуть ниже, и диспетчеры, которые мы сделали в предыдущей статье про основы Redux.
Внутри компонента, у нас всё как обычно, создаём конструктор, откуда берём props, создаём два метода, для прибавления и убавления числа, ну и конечно же, есть функция для рендера и как можете заметить у нас там две кнопки и выводим значение пропса counter.
Самое последние мы создаём объект где храним диспачи и функцию которая возвращает объект состояния которое есть в Redux.
В последнею mapStateToProps, передаётся state, состояние, из него мы берём counter, так как мы помним из прошлой статье что мы имеем комбинированный редюсер, и нужные нам данные в нём, храниться в counter.
Последние, как вы можете заметить, мы экспортируем не совсем чистый компонент App, делаем мы это через функцию connect(), которая подключаем наш компонент к основному Redux, и передаёт ему в качестве пропсов всё состояние, которое указали в mapStateToProps и диспетчеры, которые указаны в mapDispatchToProps, конечно передаём их в качестве параметров в connect(), после в круглых скобках передаём наш App.
В целом на этом основы работы, теперь вы можете запустить сайт и у вас это будет отображаться.
Важно:
Redux с классовыми компонентами работает достаточно крива, по этому рекомендуется его использовать в функциональных компонентах с использование хуков, но об этом в другой статье.
Вывод:
В этой статье вы прочитали основы работы с React Redux, думаю вы поняли как с этим работать.
Подписываетесь на соц-сети:
Оценка:
Загрузка...