初识react(三)在 react中使用redux来实现简版计数器

回顾

• 初识react(一) 揭开jsx语法和虚拟DOM面纱
• 初识react(二) 实现一个简版的html+redux.js的demo
• 初识react(三)在 react中使用redux来实现简版计数器
• 初识react(四) react中异步解决方案之 redux-saga
• 初识react(五) 数据流终极解决方案 dva(零配置)

上篇文章已经把redux核心概念讲明白了，这里就不在废话啦，不了解的能够先去回顾下，接下来咱们讲解下在react中如何使用redux，来实现一个简单计数器

先把目录结构搭好

下面咱们讲解下每一个文件的做用，而后在一个一个实现

• actions->counter.js存放计数器的动做
• reducers->index.js是主入口文件，由于可能有好多个reducer。
• reducers->counter.js存放计数器的reducer
• action-types.js 存放宏，玩游戏的确定知道，保存动做的类型
• store->index.js 是整个store对外暴露的入口文件

读过上篇文章后，对这种目录结构可能还不清楚具体的做用，可是对这些redux中概念确定已经明白，下面咱们一个一个文件开始讲解

1、编写store部分

一、编写最简单的store/action-types.js文件

• 是一个宏文件，保存计数器动做的类型，说白了就是加、减操做。贴代码看的更具体

// action-types
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
复制代码

宏文件不是必须的，可是它好处是结构清晰，一目了然能够看到计数器全部动做的类型

二、编写reducers/counter.js文件

• 是一个计数器的reducer，reducers目录下可能有不少个reducer,咱们先写一个

import * as Types from "../action-types"; //引入动做类型
let initState = {  //声明一个初始的状态
    number:0
};
function counter(state = initState, action) {   //接收state和action两个参数,并给state赋予初始值
    switch (action.type) {  //判断动做类型
        case Types.INCREMENT: //action相似这种结构{type:'INCREMENT'，count:5}
            return {number:state.number+action.count};
        case Types.DECREMENT:
            return {number:state.number-action.count};
    }
    return state    
}
export default counter

复制代码

跟咱们上篇文章写的reducer如出一辙，只不过咱们把它抽离出来，让结构清晰

三、编写reducers/index.js文件

• 因为咱们只有一个计数器的reducer，因此默认导出就能够。当有多个reducer，会在这个文件进行合并，后面再讲。

import counter from "./counter"; //默认导入reducer
export default counter      //默认导出
复制代码

在啰嗦一句，主要是为了之后方便扩展多个reducer，因此才会有reducers/index.js这个主文件

四、 编写actions/counters.js

• 把派发的动做抽离出来，用于来组件中调用

import * as Types from "../action-types"; //引入宏
let actions = {
    add(num){ //add方法会在组件内部调用，返回action对象
        return {type:Types.INCREMENT,count:num}
    },
    minus(num){
        return {type:Types.DECREMENT,count:num}
    }
};
export default actions
复制代码

五、编写store/index.js，仓库的主文件

• 这个文件主要用于导出store，提供给组件使用

import {createStore} from 'redux';
import reducer from "./reducers"
let store = createStore(reducer); //建立store
export default store;
复制代码

截止到目前为止，store文件已经所有写完。下面咱们开始写组件部分，让仓库中数据给组件使用

2、组件调用部分

一、编写react的主入口文件，即 src/index.js

• 使用react-redux库，来实现store和组件之间的通讯
• react-redux提供了2个核心API， Provider 提供 connect 连接
• Provider是一个组件，在react入口文件中用于提供store。
• connect含义是，在react组件内部链接store，进而实现组件与redux之间通讯

怪我不能给你们讲明白，咱们仍是看代码逐句解释

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from "./components/Counter";
import store from "./store";
//引入react-redux中的Provider组件，用于
import {Provider} from "react-redux";

ReactDOM.render(
    <Provider store = {store}>
        <div>
            <Counter />
        </div>
    </Provider>, document.getElementById('root'));

复制代码

二、编写Counter组件

• 组件中用到connect方法，实现组件与redux之间通讯，connect方法接受2参数。connect(mapStateToProps,actions)(Counter)
• 把store/actions.js导出的对象绑定到组件的属性中，组件内部能够经过this.props拿到对应的actions

import React from "react";
import store from "../store";
import * as Types from "../store/action-types"
//生成action的对象的方法叫actionCreator
import actions from "../store/actions/counter";
import {connect} from "react-redux";
class Counter extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
             <div>{this.props.number}</div>
                <button onClick={()=>{
                    this.props.add(5)
                }}>+</button>
                <button onClick={()=>{
                    this.props.minus(1)
                }}>-</button>
            </div>
            )
    }
}
let mapStateToProps = (state)=>{ //state表明的store.getState()
    return {...state}
};

export default connect(mapStateToProps,actions)(Counter)   
复制代码

到此为止，咱们基本实现一个计数器功能，先来测试下，而后在梳理下整个工做流程

测试点击增长记数功能

功能基本实现，可能对整个流程并不清楚怎么实现的，下面来梳理下整个工做流程

react-redux整个流程分析

• 当点击按钮触发 this.props.add(5)，返回的action即{type:Types.INCREMENT,count:num}，会在connect内部被派发
• 派发动做后被reducer处理，而后返回新的状态
• 页面刷新

最后来张图结尾

• 更多优质文章参考
• redux全部源码解析戳这里