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

栏目: IOS · Android · 发布时间: 6年前

内容简介:上篇文章已经把redux核心概念讲明白了,这里就不在废话啦,不了解的可以先去回顾下,接下来我们讲解下在react中如何使用redux,来实现一个简单计数器下面我们讲解下每个文件的作用,然后在一个一个实现读过上篇文章后,对这种目录结构可能还不清楚具体的作用,但是对这些redux中概念肯定已经明白,下面我们一个一个文件开始讲解

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

先把目录结构搭好

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

下面我们讲解下每个文件的作用,然后在一个一个实现

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

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

一、编写store部分

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

  • 是一个宏文件,保存计数器动作的类型,说白了就是加、减操作。贴代码看的更具体
// action-types
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
复制代码

宏文件不是必须的,但是它好处是结构清晰,一目了然可以看到计数器所有动作的类型

2、编写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一模一样,只不过我们把它抽离出来,让结构清晰

3、编写reducers/index.js文件

  • 由于我们只有一个计数器的reducer,所以默认导出就可以。当有多个reducer,会在这个文件进行合并,后面再讲。
import counter from "./counter"; //默认导入reducer
export default counter      //默认导出
复制代码

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

4、 编写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
复制代码

5、编写store/index.js,仓库的主文件

  • 这个文件主要用于导出store,提供给组件使用
import {createStore} from 'redux';
import reducer from "./reducers"
let store = createStore(reducer); //创建store
export default store;
复制代码

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

二、组件调用部分

1、编写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'));

复制代码

2、编写Counter组件

  • 组件中用到connect方法,实现组件与redux之间通信,connect方法接受2参数。connect(mapStateToProps)(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(三)在 react中使用redux来实现简版计数器

测试点击增加记数功能

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

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

react-redux整个流程分析

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

最后来张图结尾

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JSP基础教程

JSP基础教程

耿祥义 / 清华大学出版社 / 2004-1 / 22.00元

《JSP基础教程:黑魔方》详细讲解了JSP语法和基本的程序设计方法。全书共分6章,内容包括JSP简介、JSP语法、JSP内置对象、JSP文件操作,以及如何在JSP中使用数据库等重要内容。《JSP基础教程:黑魔方》所有知识都结合具体实例进行介绍,力求详略得当,突出JSP在开发Web动态网站方面的强大功能及在开发商务网站方面的应用,使读者快速掌握和运用JSP的编程技巧。JSP(Java Server ......一起来看看 《JSP基础教程》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具