One of my configuration redux (to achieve a storage and calling the method) Tour

Preface : Today it, to configure the look redux, redux importance of it, a lot of Ba Baba, did not take time to configure important, because many properties and methods related to the usage is alive, but the format is required memory.

Do not think that my nagging process, in some places in order to facilitate understanding and memory, but will look around, configuration redux really is too much trouble, we usually do not use common methods, we are not familiar with them, so will the course be remembered.

(1) First installed redux environment

A stable version and a redux redux binding libraries

1 npm install redux --save
2 npm install react-redux --save

The Bank Code is purely friendship gift, to see is earned, a redux developer tools

npm install redux-devtools --save-dev

Here is dropping:

Then we check package, it has been completed.

(2) Now, feel the three important concepts action, reducer and store.

Action role:

1, with the Action to distinguish specific action is performed. For example, I want to add a project or delete an item.

2, the operation data are first obtained data. Such as adding data must have data, delete data must have ID. action is to keep local data.

3, with no other data, only the revelation of how existing data needs to be adjusted, or which require active data acquisition. If I want to delete all the data, as long as it can be told

Reducer role:

Official Description: Action have just described the fact that things happen, and did not specify how to apply the update state. This is a reducer of things to do.

So to speak, Action as a commander, told what things we should do, for example, I want to delete, reducer will give us 'resources (which is above data)', a true manual workers is reducer.

That is, action each of which is described, for example add friends, a delete, delete all the matter, the reducer has a corresponding function to process the data. After you return to a new state

reducer only thing a pattern matching, real data handler, an additional written elsewhere, call fills in the reducer.

※: reducer: reduce (the method we use to write) because action objects vary, each corresponding to a particular case, but in the end all aggregated into state object, from many to one, which is a decrease (reduce) the process, so this process is completed the function is called reducer.

Store:

The first two, we know that the use of action to describe "what happened", according to action and use reducers to update the state of usage.

Store is to link them to the object together. Store has the following duties:

Maintaining the state of the application;
Providing getState () method to get State;
Providing dispatch (action) Method State;
By subscribe (listener) registered listeners

(3) Next, create actions folder, then create a new folder reducers, and create their own index.js.

Create a folder does not screenshots. . . index first empty, wait for the next supplement.

(4) We need to associate actions and reducers (screenshot contrast codes, rookie please note )

Unmodified src of index.js:

Now, from the react-redux Curry, bring Provider way out creatStore redux method from inside.

import { Provider } from 'react-redux';
import { creatStore } from 'redux';

React-Redux provides two interfaces Provider , Connect .

React Provider is a component, its role is to store saved connect subassembly used.

State and will connect dispatch converted to transfer to the props subassembly. My understanding is that because all the data are concentrated in the store, Provider from there to store data took over. It's a good friend to connect, connect a link, connection means Well, so it will be a good friend provider of data took over, use it for those sub-assemblies.

import rootReducer from "./reducers"

The introduction reducers file (if it is introduced into the file, the default is introduced index.js).

We create a warehouse store: We use the method to create a database application to store all the state.

const store = createStore(rootReducer)

App wrapped with Provider module, the module then thrown as Hello, rendering the root node

const store = createStore(rootReducer)

export default class Hello extends Component {
    render() {
        return (
            <Provider store={ store }>
                <div>
                    <App/>
                </div>
            </Provider>
        )
    }
}


ReactDOM.render(<Hello />, document.getElementById('root'));

The final code looks like this (after being given the run-time package Component, pay attention to see the first blue box on the picture):

The role of this code, on the whole should put it this way:

I created a Hello modules to show you redux, the module will create Hello App label package, but we will return with Provider component out of something wrapped after the connect method of generating container components, container components need to get the state objects to generation parameter UI components. In this way, all subcomponents App on default can get a state. At the same time, we render directly to the root of the root node App also changed Hello.

(5) Next, the configuration index.js reducers

在这个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)