redux-course-ru-v2
Search…
Точка входа
(Вы можете взять ветку из репозитория, который мы создали в процессе настройки для старта выполнения урока. Практика очень важна.)
Подтянем Redux и react-redux в наш проект:
1
npm i redux react-redux --save
Copied!
Точка входа в наше приложение - src/index.js
Обновим его содержимое:
src/index.js
1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
import { createStore } from 'redux'
4
import { Provider } from 'react-redux'
5
import App from './App'
6
7
import registerServiceWorker from './registerServiceWorker'
8
9
import './index.css'
10
11
const store = createStore(() => {}, {}) // [1]
12
13
ReactDOM.render(
14
<Provider store={store}>
15
<App />
16
</Provider>,
17
document.getElementById('root')
18
)
19
registerServiceWorker()
Copied!
Благодаря этому компоненту, мы сможем получать необходимые данные из store нашего приложения, если воспользуемся вспомогательной функцией
connect, речь о которой пойдет далее. Сейчас нам и получать нечего, так как store у нас - пустой объект.Давайте подробнее посмотрим на строку [1]:
1
const store = createStore( () => {}, {})
Copied!
Во-первых, если вам трудно читать ES2015 код, то переводите его в привычный ES5, с помощью babel-playground.
На скриншоте ниже: слева - современный код, справа - старый ES5 код, после преобразования.
create-store-babel
Во-вторых, давайте взглянем на документацию метода createStore: принимает один обязательный аргумент (функцию reducer) и парочку не обязательных (начальное состояние и "усилители").
Теперь переведем то, что мы написали, когда присваивали store:
Возьми пустую анонимную функцию в качестве редьюсера и пустой объект в качестве начального состояния. Если коротко: возьми ничего и "ничего" не делай.
Предлагаю вынести создание store в отдельный файл, так как в нем мы добавим позже несколько строк кода, в том числе, добавим усилителей (enhancers).
src/store/configureStore.js
1
import { createStore } from 'redux'
2
3
export const store = createStore(() => {}, {})
Copied!
Поправить импорт в индексе:
src/index.js
1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
import { Provider } from 'react-redux'
4
import { store } from './store/configureStore' // исправлено
5
import App from './App'
6
7
import registerServiceWorker from './registerServiceWorker'
8
9
import './index.css'
10
11
ReactDOM.render(
12
<Provider store={store}>
13
<App />
14
</Provider>,
15
document.getElementById('root')
16
)
17
registerServiceWorker()
Copied!
Усилители - это middleware функции. Если читатель знаком с express.js, то он знаком с усилителями в redux. Для остальных: типичный усилитель - логгер (logger), который просто пишет в консоль все что происходит с наблюдаемым объектом.
Давайте так же исправим App.js, чтобы обозначить чем мы тут с вами занимаемся:
1
import React, { Component } from 'react'
2
import './App.css'
3
4
class App extends Component {
5
render() {
6
return (
7
<div className="App">
8
<header className="App-header">
9
<h1 className="App-title">Мой топ фото</h1>
10
</header>
11
<p className="App-intro">Здесь будут мои самые залайканые фото</p>
12
</div>
13
)
14
}
15
}
16
17
export default App
Copied!
app-inside-provider
Итого: мы настроили точку входа для redux-приложения (src/index.js), в которой обернули все в
<Provider />. Так же вынесли для будущего удобства настройку store в отдельный файл.Last modified 2yr ago
Copy link