React+Antd+Redux实现待办事件的方法


Posted in Javascript onMarch 14, 2019

之前也是写过一篇关于Redux的文章,来简单理解一下Redux,以及该如何使用。今天我就来分享一个也是入门级别的,React+Redux+antd来实现简单的待办事件。同时也讲讲自己对Redux的理解。先来看一张图吧:

React+Antd+Redux实现待办事件的方法

我们简单的比喻来让我们更加好的理解Redux,我们这样比喻(图书馆借书):
1.React Component:借书人
2.Action Creators:你要说你要借书这句话,肯定要说话吧,就是一句话:我要借书
3.Store:图书馆管理员
4.Reducer:图书馆管理员肯定不可能记得所有书,那么Reducer就是作为一本小册子,供图书馆管理员查

通俗理解:我要借书,我要先说话,告诉图书馆管理员我要借书,当图书馆管理员知道了之后,但是它不可能知道所有的书籍在哪里,所以需要一本小册子去找,最后找到了之后,再送到你手上。
专业术语理解:(Component)要借书,我要先说话(Action ),告诉图书馆管理员(Store)我要借书,当图书馆管理员知道了之后,但是它不可能知道所有的书籍在哪里,所以需要一本小册子(Reducer)去找,最后找到了之后,再送到你(Component)手上。

当你看图觉得蒙的时候你再看看这个比喻是不是更好理解了?流程我们大概清楚了,我们就开始来看怎么写这个待办事项吧。
我们先来列一个提纲吧,屡清楚思路再写代码。
1.react component(todolist.js)
2.引入antd
3.写store
4.写reducer
5.写action

大概就是上面的一些流程:

如何引入antd呢?

官方文档:链接描述

文件目录结构如下:

React+Antd+Redux实现待办事件的方法

创建文件之前,首先创建图书馆管理员(store),他不知道书具体在哪里,所以再创建小册子(redux),给到图书馆管理员(store):

//src/redux/index.js
import {createStore} from 'redux';
import reducer from './reducer'

const store=createStore(reducer);


export default store;
//src/redux/reducer.js
const defaultState={
  inputValue:'',
  list:[1,2]
}
export default(state=defaultState,action)=>{
  return state;
}

*注释:刚开始state,这里一定要给state赋一个初始值,才不会报错

接下来你就可以,在todolist.js中用store.getState()获取到store的值,我把他直接赋值给状态:

React+Antd+Redux实现待办事件的方法

我先实现一个由Component发送action,store收到action,在由reducer接受处理,最后返回一个新的状态,Component接收显示:

//src/redux/TodoList.js
import React from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List} from 'antd';
import store from './index';
export default class TodoList extends React.Component{
  constructor(props){
    super(props);
    this.state=store.getState();
  }
  componentDidMount(){
    console.log(this.state);
  }
  handleChg=(e)=>{
    const action={
      type:'change_input_value',
      inputValue:e.target.value
    }
    store.dispatch(action);
  }
  render(){ 
    console.log(this.state)  
    return(
      <div style={{marginTop:"10px",marginLeft:"20px"}}>
        <Input placeholder="请输入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
        </div>
      </div>
    );
  }
  
}

思路:我们通过input框中监听内容变化发送action,reucer去处理

//src/redux/reducer.js
const defaultState={
  inputValue:'',
  list:[1,2]
}

export default(state=defaultState,action)=>{
  if(action.type==='change_input_value'){
    const newState=JSON.parse(JSON.stringify(state))
    newState.inputValue=action.inputValue;
    return newState;
  }
  
  return state;
}

你可以打印出newState看一下,你就会发现inputValue就是你输入的值了。

接下来的就可以举一反三了。

完整代码:

///src/redux/index.js
import {createStore} from 'redux';
import reducer from './reducer'

const store=createStore(reducer);
///src/redux/reducers.js
export default store;

const defaultState={
  inputValue:'',
  list:[1,2]
}

export default(state=defaultState,action)=>{
  if(action.type==='change_input_value'){
    const newState=JSON.parse(JSON.stringify(state))
    newState.inputValue=action.inputValue;
    return newState;
  }
  if(action.type==='send_message'){
    const newState=JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue);
    newState.inputValue='';
    return newState;
  }
  if(action.type==='delete_message'){
    const newState=Object.assign({},state);
    newState.list.splice(action.index,1);
    return newState;
  }
  return state;
}
///src/redux/todoList.js
import React from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List} from 'antd';
import store from './index';
const data=[
  1,2,3
];
export default class TodoList extends React.Component{
  constructor(props){
    super(props);
    this.state=store.getState();
    store.subscribe(this.F5)
  }
  componentDidMount(){
    console.log(this.state);
  }
  handleChg=(e)=>{
    const action={
      type:'change_input_value',
      inputValue:e.target.value
    }
    store.dispatch(action);
  }
  handleSend=()=>{
    const action={
      type:'send_message',
    }
    store.dispatch(action);
  }
  F5=()=>{
    this.setState(store.getState());
  }
  handleItem=(index)=>{
    const action={
      type:'delete_message',
      index:index
    }
    store.dispatch(action);
  }
  render(){ 
    console.log(this.state)  
    return(
      <div style={{marginTop:"10px",marginLeft:"20px"}}>
        <Input placeholder="请输入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
        <Button type="primary" onClick={this.handleSend}>发送</Button>
        <div style={{width:"400px",marginTop:"10px"}}>
        <List
           bordered
           dataSource={this.state.list}
           renderItem={(item,index) => (<List.Item onClick={this.handleItem.bind(this,index)}>{item}</List.Item>)}/>
        </div>
      </div>
    );
  }
  
}
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './redux/TodoList';

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

这样就实现了一个利用redux来实现简单的待办事项.

相信你如果写完这个demo之后,肯定对Redux大致有了了解。如果自己在写的过程中有什么疑惑,欢迎提出,我会给你解答。后期也会更新一些关于Redux的其他方面的知识。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript重写alert方法的实例代码
Mar 29 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
js闭包的用途详解
Nov 09 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
javascript如何定义对象数组
Jun 07 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
Node.js + express基本用法教程
Mar 14 #Javascript
Vue渲染过程浅析
Mar 14 #Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 #Javascript
详解使用React制作一个模态框
Mar 14 #Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 #Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 #Javascript
详解jQuery-each()方法
Mar 13 #jQuery
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php树型类实例
2014/12/05 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php 可变函数使用小结
2018/06/12 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
JavaScript实现级联菜单的方法
2015/06/29 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
js变量提升深入理解
2016/09/16 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
js实现计算器功能
2020/08/10 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
介绍Python中的文档测试模块
2015/04/28 Python
python中__call__内置函数用法实例
2015/06/04 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python matplotlib可视化实例解析
2020/06/01 Python
关于python中导入文件到list的问题
2020/10/31 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
上课迟到检讨书
2014/01/19 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书