Источник: HTTP: //www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
Import магазин => OnClick => событие отправки => = выполнить редуктор> store.subscribe
React-Redux компоненты: компоненты пользовательского интерфейса (ответственные за пользовательский интерфейс визуализация) и контейнерные компоненты (ответственная за управление данными и логикой).
Реагировать-Redux источник подключения:
вар подключить = createConnect () =>
функция createConnect () {
connectHOC = connectAdvanced
Функция возврата соединить (mapStateToProps, mapDispatchToProps, mergeProps) {
возвращение connectHOC () => возвращение connectAdvanced () => функция connectAdvanced (selectorFactory) {
возвращение функции wrapWithConnect (WrappedComponent ) {
возврата hoistNonReactStatics (Connect, WrappedComponent) => вар hoistNonReactStatics = createCommonjsModule (функция (модуль, экспорт) {
})
})
}
}
}
А, компоненты пользовательского интерфейса
1, компонент пользовательского интерфейса имеет следующие характеристики.
(1) отвечает только для рендеринга пользовательского интерфейса, без какой - либо бизнес - логики
(2) это не состояние (то есть, без использования переменной this.state)
(3) Все данные по параметрам (this.props) , предоставленные
(4) не использовать любой в API Перевождите
пример (6) ниже компоненты пользовательского интерфейса.
Const Заголовок = значение => <h1> {значение} </ h1>;
2, потому что они не содержат состояние, компоненты пользовательского интерфейса, также известное как «чистый компонент», то есть, он функционирует как чистое, чистое определить его значение по параметру.
Во- вторых, узел емкости
1, узел контейнера имеет следующие особенности.
(1) отвечает за управление данными и бизнес - логикой, не несет ответственность за UI презентацию
(2) с внутренним состоянием
(3) с использованием API Redux
три, компонент пользовательского интерфейса, так и в сочетании с контейнером узлом
1, если компонент пользовательского интерфейса оба имеет бизнес - логику , то он разделяется на два слоя: контейнер сборки снаружи, внутри упаковки компонента пользовательского интерфейса. Бывший ответственный за связи с внешним миром, данные последнего, чтобы сделать вид последнего.
2, React-Перевожди указаны, все компоненты пользовательского интерфейса , предоставленных пользователем, устройство контейнера автоматически генерируются React-Redux.
Четыре, подключить ()
React при условии , Перевождите-соединения для генерации компоненты пользовательского интерфейса из контейнера сборки.
импорт {} соединиться с 'реагируют-Redux'
сопзЬ myContainerComponent = соединить (
mapStateToProps,
mapDispatchToProps
) (myUIComponent)
Выше код, myUIComponent компонент пользовательского интерфейса, myContainerComponent генерируется автоматически с помощью метода React-Перевождь соединить с помощью устройства контейнера. Подключения метод принимает два параметра: mapStateToProps и mapDispatchToProps, который определяет компоненты пользовательского интерфейса бизнес - логики. Бывшее отвечают за входную логику, т.е. отображенной на внешнее состояние данных атрибутов компонента пользовательского интерфейса (реквизит), который отвечает за вывод логики, пользователь собирается управлять компонентом пользовательского интерфейса отображается в объекты действий, распространяется из компонентов пользовательского интерфейса.
Пять, mapStateToProps ()
. 1, является функцией mapStateToProps. Его роль заключается в создании отображение объекта в состояние вне сборки реквизита объекта UI, возвращается после выполнения объекта {prop1: state.state1, prop2: state.state2 }.
2, подключение пусть mapStateToProps Подписка Store, то есть бывший в массив свойств последнего, слушатели найти состояние обновление, внедрение «издательских функций», а затем цикл по массиву и исполняй пересчитывать компоненты параметры пользовательского интерфейса, тем самым вызывая повторный рендеринг компонентов пользовательского интерфейса. Примечание: Подписаться как «связывание», подключите исполнение вызвало подписываться на выполнение.
3, первый параметр всегда mapStateToProps состояния объектов, второй параметр может быть использован ownProps, представитель реквизита возражал сборки контейнера. После использования контейнера в сборе , если этот параметр изменяется, приведет к повторной визуализации компонентов пользовательского интерфейса.
mapStateToProps = соп (State, ownProps) => {
возвращение {
Активный: ownProps.filter === state.showFilter
// Активный: state.active, этот случай не второй параметр ownProps
}
}
4, если опущенное mapStateToProps соединить параметры метода, то компоненты пользовательского интерфейса не подписаться на магазин, Хранить обновления не вызывают , что это обновленные компоненты пользовательского интерфейса.
Шесть, mapDispatchToProps ()
. 1, mapDispatchToProps соединить функция второго параметр, параметры , используемые для построения компонентов пользовательского интерфейса способа отображения store.dispatch. Другими словами, он определяет , какие действия должны быть переданы в качестве действий Store. Т.е., пользователь приводит в действие компонент сопоставлен с действием. Это может быть функция, она может быть целью.
2, если функция mapDispatchToProps, отправка и будет ownProps (реквизита объекта сборки контейнера) два параметра. Код можно увидеть ниже, mapDispatchToProps как функция должна возвращать объект, «каждый» ключ карта объекта, определить , каким образом параметры компонентов пользовательского интерфейса послал действий.
mapDispatchToProps = Const (диспетчерская, ownProps) => {
возвращение {
событие // Компоненты запуска пользовательского интерфейса , такие как OnClick, выполнить функцию myClick, в чистом функции, то action.type в соответствии с назначением, обновления состояния (фильтр) стр.
MyClick: () => {
отправка ({
тип: 'MyFilter',
фильтр: ownProps.filter // Получить объект из атрибута
});
}
};
}
3, если mapDispatchToProps является объектом, то соответствующий тому же имя, что и имя каждого компонента пользовательского интерфейса ключевых параметров должна быть функциональной клавишей, будет рассматриваться как Создатель Действие, действие будет выдается автоматически возвращается в Redux.
{MapDispatchToProps = Const
MyClick: (фильтр) => {// атрибут в качестве параметра
типа: '', MyFilter
фильтра: Фильтр
};
}
Семь, <Provider> компоненты
соединить метод после того, как контейнер для генерирования компонентов, компоненты контейнера должны получить государственные объекты для создания компонентов параметров пользовательского интерфейса. Одним из решений является указать объект в качестве параметра , передаваемого в контейнере узла. Но в глубоких компоненты контейнера могут быть уровнем, уровень состояния будет проходить на очень хлопотно. Реагировать-Redux обеспечивает Provider компонент , который позволяет Тарным получить состояние. В следующем коде, внешнего слоя Provider корневой пакет, все подкомпоненты App можно получить состояние.
импорта {} Провайдер из 'реагируют-Redux'
импорта {createStore} из '' перевождь
импорта MYAPP из './reducers
импорта App из' ./components/App»
пусть магазин = createStore (MYAPP);
рендеринга (
<провайдер магазин = {магазин}>
<приложение />
</ Провайдер>,
document.getElementById ( 'RootElement')
)
Его принцип является свойство контекста Реагировать сборка, хранение в вышеуказанном контексте контекста объекта. Источник следующим образом:
Класс поставщик расширяет компонент {
getChildContext () {
возвращение {
магазин: this.props.store
};
}
Визуализации () {
вернуть this.props.children;
}
}
Provider.childContextTypes = {
магазин: React.PropTypes.object
}
Код React-Redux контейнер сборки автоматически, так что он похож на следующее, а затем сохранить сборочный узел может получить из контекста, код выглядит следующим образом.
Класс myContainerComponent расширяет компонент {
componentDidMount () {
сопз {} = магазин this.context;
this.unsubscribe = store.subscribe (() =>
this.forceUpdate ()
);
}
Визуализации () {
Const реквизита = this.props;
Const {магазин} = this.context;
Const состояние = store.getState ();
// ...
}
}
myContainerComponent.contextTypes = {
магазин: React.PropTypes.object
}
VII Пример: счетчик
1, следующий пример представляет собой счетчик компонент представляет собой компонент пользовательского интерфейса чистым. Этот компонент пользовательского интерфейса имеет два параметра: значение и onIncreaseClick. Прежние должны быть рассчитаны из состояния, второй необходимости выпускать наружу действие.
Класс Счетчик расширяет компонент {
визуализации () {
сопз {значение, onIncreaseClick} = this.props
возврата (
<DIV>
<SPAN> {значение} </ SPAN>
<Кнопка OnClick = {onIncreaseClick}> Увеличить </ Кнопка>
</ DIV >
)
}
}
2, следующие определения состояния значение отображения, и направить onIncreaseClick отображения.
mapStateToProps функция (состояние) {
возвращение {
значение: state.count / * могут быть выполнены , когда результаты функции * /
}
}
функция mapDispatchToProps (отправка) {
возвратные {
инициирующее событие // компоненты пользовательского интерфейса , такие как OnClick, выполнять функцию onIncreaseClick, в в чистой функции, в соответствии с соответствующим состоянием action.type различного назначения, стр обновить
onIncreaseClick: () => отправка ( действие) / * аргумент может быть тип объекта {: «Увеличение»} * /
}
}
3, генератор поведения (Создатель действий)
Const действие = {типа: 'увеличение'}
4, соединяют способ генерации сборки сосуда.
Const App = подключающиеся (
mapStateToProps,
mapDispatchToProps
) (счетчик)
5, редуктор (чистая функция), определенный в компоненте.
Функция счетчика (состояние = {число: 0}, действие) {
Const счетчик = state.count
переключатель (action.type) {
случай 'увеличение':
возвращение {количество: кол + 1} по
умолчанию:
возвращать состояние
}
}
6, чтобы генерировать хранилище объектов, за пределами поставщика корневого слоя пакета.
импорт {Loadstate, saveState} от './localStorage';
Const persistedState = Loadstate ();
Const магазин = createStore (
MYAPP,
persistedState
);
store.subscribe (дроссель (() => {
saveState ({
Todos: store.getState () Todos,.
})
}, 1000))
ReactDOM.render (
<Провайдер магазин = {магазин}>
<приложение />
</ Провайдер >,
document.getElementById ( 'RootElement')
);
Девять, React-маршрутизатор библиотеки маршрутизации. Используйте React-маршрутизатор проекта, также завернутый в слое на внешней стороне с Provider Router, в конце концов, единственной функцией передачи объектов магазина провайдера.
Корень Const = ({магазин}) => (
<Провайдер магазин = {магазин}>
<маршрутизатор>
<путь маршрута = "/" компонент = {приложение} />
</ маршрутизатор>
</ Провайдер>
);
Десять, разница между HTML и ВЗАИМОДЕЙСТВУЮТ событие события
ВЗАИМОДЕЙСТВУЕТ событие с HTML событием, первое письмо после инцидента на ВЗАИМОДЕЙСТВУЮТ капитализируются! Например ВЗАИМОДЕЙСТВУЕТ нажмите событие является кнопка <OnClick = {myClick}> Нажмите </> кнопку, и событие щелчка мышью кнопку <OnClick = "myClick () HTML "> Нажмите кнопку </>.
Примечание: Подача - режим выпуска:
1, увеличивая к DOM - объект пользовательского события атрибуты: obj.selfEvent = [];
2, определить функцию подписки (связанную), множество пользовательской функции, функцию высвобождения
3, множество раз Подписаться на выполнение функции (BIND), тем больше пользовательских функций в (1) массиве
4, выполнение издательских функций, найти свойство пользовательских событий, пересекающий массив для выполнения пользовательских функций
в общем, в любом месте Исполнительная «подписка (связывание) функции», функция (пользовательская) в массив свойств объекта DOM, ожидая нужное время с «функцией выпуска» траверс исполнения.
Другой: поток только односторонняя мысль потока данных, это не конкретный кадр.