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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
微信小程序签到功能
Oct 31 Javascript
js中arguments对象的深入理解
May 14 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
提问的智慧
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
推荐dojo学习笔记
2007/03/24 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
Vue 过滤器filters及基本用法
2017/12/26 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
Android面试题附答案
2014/12/08 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
应聘自荐信
2013/12/14 职场文书
爽歪歪广告词
2014/03/20 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
合理化建议书
2015/02/04 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Selenium浏览器自动化如何上传文件
2022/04/06 Python