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 相关文章推荐
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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面试题(对属性或方法的访问控制)
2012/09/13 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Prototype Function对象 学习
2009/07/12 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
使用Python处理BAM的方法
2018/09/28 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python3实现猜数字游戏
2020/12/07 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python中with用法讲解
2020/02/07 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
python时间time模块处理大全
2020/10/25 Python
大学生应聘推荐信范文
2013/11/19 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
产品开发计划书
2014/04/27 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
主持人开场白台词
2015/05/29 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
餐馆开业致辞
2015/08/01 职场文书
图书馆义工感想
2015/08/07 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书