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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
详解puppeteer使用代理
Dec 27 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
一些常用的php简单命令代码集锦
2007/09/24 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
JS对日期操作封装代码实例
2019/11/08 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python之wxPython应用实例
2014/09/28 Python
python中assert用法实例分析
2015/04/30 Python
Python科学画图代码分享
2017/11/29 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
详解Python文件修改的两种方式
2019/08/22 Python
appium+python adb常用命令分享
2020/03/06 Python
python文件排序的方法总结
2020/09/13 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
创新比赛获奖感言
2014/02/13 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
调任通知
2015/04/21 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书