Один из моей конфигурации Redux (для достижения хранения и вызова методы) тура

Предисловие : Сегодня, чтобы настроить внешний вид Redux, Redux важности этого, много Ба Баба, не потребуется времячтобы настроить важно, потому что многие свойства и методысвязанные с использованием живые, но формат требуется память.

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

(1) Первый установлен перевождь среды

Версия стабильна и перевождь перевождь связывания библиотек

1 NPM установить Redux - сохранить
 2 НПМ установки реагируют-перевождь --save

Код банка является чисто дружба подарок, чтобы увидеть заработана, разработчик перевождь инструменты

НАЯ установка Redux-DevTools --save-DEV

Вот капельный:

Затем мы проверяем пакет, он был завершен.

(2) Теперь, чувствуют три важные концепции действий, редуктор и магазин.

Действие роль:

1, с действий, чтобы отличить специфическое действие выполняется. Например, я хочу, чтобы добавить проект или удалить элемент.

2, данные операции сначала получены данные. Такие, как добавление данных должны иметь данные, удалить данные должны иметь удостоверение личности. действие, чтобы сохранить локальные данные.

3, без каких-либо других данных, только откровение о том, как существующие потребности в данных налаживаться, или которые требуют активного сбора данных. Если я хочу, чтобы удалить все данные, до тех пор, как это может быть сказано

Редуктор роль:

Официальное описание: Действие только что описал тот факт, что вещи случаются, и не уточнило, как применить состояние обновления. Это редуктор вещей, чтобы сделать.

Так сказать, действие в качестве командира, сказал, что вещи, которые мы должны сделать, к примеру, я хочу удалить, редуктор даст нам ресурсы (что выше данных) ', истинный ручной труд является редуктором.

То есть, действие, каждый из которых описан, например, добавлять друзей, удаление, удалить все вещества, редуктор имеет соответствующую функцию для обработки данных. После возвращения в новое состояние

редуктор Единственным, что сопоставление с образцом, реальный обработчиком данных, дополнительно написано в другом месте, заливки вызова в редукторе.

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

Хранить:

Первые два, мы знаем, что использование действия, чтобы описать «что случилось», согласно действий и использования переходников для обновления состояния использования.

Магазин, чтобы связать их с объектом вместе. Магазин имеет следующие обязанности:

Поддержание состояния приложения;
Обеспечение GetState () метода , чтобы получить государство;
Обеспечение доставки (действие) Метод государства;
По подписываются (слушатель) зарегистрированных слушателей

(3) Затем создайте папку действия, а затем создать новую папку восстановители, а также создавать свой собственный index.js.

Создайте папку не скриншоты. , , Индекс первого опорожнить, ждать следующего дополнения.

(4) Мы должны ассоциированные действия и переходники (скриншот контрастных кодов, новобранец Пожалуйста , обратите внимание )

Unmodified ГНЦ index.js:

Теперь, из-перевождь реагировать Карри, принести Provider выход метод Redux creatStore изнутри.

импорта {} Провайдер от  ' реагируют-Redux ' ; 
импорт {creatStore} из  ' Redux ' ;

Реагировать-Redux предоставляет два интерфейса поставщика , Connect .

Реагировать Provider является компонентом, его роль заключается в магазин сохранен соединять узел используется.

Государство и соединится отправка преобразуется в передачи реквизита сборочного узла. Я понимаю, что, поскольку все данные сосредоточены в магазине, Provider оттуда для хранения данных, взял на себя. Это хороший друг для подключения, подключить связь, соединение означает Ну, так что это будет хороший друг провайдер данных взял на себя, использовать его для этих узлов.

импортировать rootReducer из  « ./reducers »

Введение редукторы файл (если он будет введен в файл, по умолчанию вводится index.js).

Мы создаем склад магазин: Мы используем метод для создания приложений баз данных для хранения всех состояние.

Const магазин = createStore (rootReducer)

App завернутый с модулем Provider, модуль затем брошенным, как Hello, делая корневой узел

Const магазин = createStore (rootReducer) 

экспорта по умолчанию  класс Hello расширяет компонент { 
    визуализации () { 
        возвращение (
             <Provider магазин = {магазин}> 
                <DIV> 
                    <App /> 
                </ DIV> 
            </ Provider> 
        ) 
    } 
} 


ReactDOM.render ( <Hello />, document.getElementById ( ' корень ' ));

Окончательный код выглядит следующим образом (после того, учитывая время выполнения пакета компонентов, обратите внимание, чтобы увидеть первый синий прямоугольник на рисунке):

Роль этого кода, в целом должен поставить его таким образом:

我创建了一个Hello模块来给大家展示redux,创建Hello模块将App标签包裹，但是,我们用Provider组件将return出来的东西包裹，connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。这样，App的所有子组件就默认都可以拿到state了。同时，我们直接渲染到root根节点的App也就改成了Hello。

（5）接下来配置reducers的index.js

在这个index里，我们要做的，就是将里面所有的小的reducers整合起来，然后抛出。我这里假设用page01和page02来分开管理小的reducers，当然，你不嫌麻烦可以把所有的功能都写在主文件里。

我的page1和2里都没有写方法，等下再进行功能的编写。

（6）配置actions里面的index.js

在这个index，我们要做的呢，是将所有的方法抛出，也是两个空的，额，等下就写。。。

（7）运行调试

这次运行呢，就是看看我的组件能不能正常加载。。。因为你没仔细看我的index.js里的第一个蓝框，就有可能报这个错：

其他错误请自己逐渐调试，因为我的已经正常运行。

（8）既然搭建了redux，然后我们要实现一个方法，点击自增。。。

（笑喷了自己，这个方法是演示方法中，最常用也是最low的demo，自己认为。。。）

注释给的很详细了

（9）配置reducer的counter1

我们把方法反出去，这里是把自增的方法反出去了

（10）主组件的一些个操作（两张图并一张）：

注释已经很清楚了

mapStateToProps 是一个函数(函数名可以自定义)，它的作用就像它的名字那样，建立一个从（外部的）state对象到（UI组件的）props对象的映射关系。由此你就可以推测，mapDispathToProps的意思和这个是差不多的，分发方法。

（11）此时的页面效果：

我点击的效果：

恭喜自己，功能实现了。

（12）代码给你们（index的）

 1 import React, { Component } from 'react'
 2 
 3 import './App.css';
 4 
 5 import { connect } from "react-redux" //从react-redux里拿到connect方法
 6 import { counterCreator } from "./actions"  //暴露counterCreator这个方法
 7 
 8 class App extends Component {
 9   constructor(props){
10     super(props)
11     this.state={}
12   }
13 
14   handleClick=()=>{
15     this.props.numAdd()
16   }
17   
18   render() {
19     return (
20       <div className='Box'>
21         <h3>{this.props.$$num}</h3>
22         <button onClick={this.handleClick}>点击自增</button>
23       </div>
24     )
25   }
26 }
27 
28 //数据
29 const mapStateToProps = (state) => {
30   console.log(state)
31   return {
32     $$num : state.page01.num //$$只是一个标识，建议加
33   }
34 }
35 
36 //dispatch 分发方法
37 const mapDispathToProps = (dispatch) => {
38   return{
39     numAdd : () => dispatch(counterCreator.numAdd())
40   } 
41 }
42 
43 //connect 高阶组件、高阶函数  传入一个组件=>返回一个新的组件
44 export default connect(
45   mapStateToProps,
46   mapDispathToProps
47 )(App)