• 在庆祝海南建省办经济特区30周年大会上的讲话 2019-10-07
  • 俄罗斯世界杯F组:球迷风采 2019-09-24
  • 彭于晏廖凡曝姜文“精神洁癖” 2019-09-24
  • 苏州大学研究生支教团网上众筹资助留守儿童 2019-09-23
  • 湖北政务微信排行榜第187期出炉 交警类公号表现亮眼 2019-09-19
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-08-31
  • 母亲节又送康乃馨?送这样的健康佳品才走心 2019-08-30
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-08-26
  • 兰芝雪纱修颜气垫隔离霜 2019-07-27
  • “鹊桥”中继星顺利进入使命轨道运行 2019-07-27
  • 超越舆情管理的360度信息决策 2019-07-22
  • 视频陶然居变形记:从路边小饭馆到全国餐饮十强 2019-07-21
  • 防震减灾事业发展的重要理论成果 2019-07-20
  • 珠宝配美人!李冰冰大片衣着性感秀身段 2019-07-20
  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 香港赛马会网址大全:React+Antd+Redux实现待办事件的方法

     更新时间:2019年03月14日 09:53:48   作者:乘风破浪   我要评论
    这篇文章主要介绍了React+Antd+Redux实现待办事件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw 之前也是写过一篇关于Redux的文章,来简单理解一下Redux,以及该如何使用。今天我就来分享一个也是入门级别的,React+Redux+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呢?

    官方文档:链接描述

    文件目录结构如下:

    创建文件之前,首先创建图书馆管理员(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的值,我把他直接赋值给状态:

    我先实现一个由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的其他方面的知识。

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

    相关文章

    • js中replace的用法总结

      js中replace的用法总结

      本篇文章主要是对js中replace的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
      2013-12-12
    • javascript自执行函数之伪命名空间封装法

      javascript自执行函数之伪命名空间封装法

      比较之后,我们可以发现,第二方法更加的直观,易于理解。但是少了封装过程,代码完全裸露在外。
      2010-12-12
    • javascript中setAttribute兼容性用法分析

      javascript中setAttribute兼容性用法分析

      这篇文章主要介绍了javascript中setAttribute兼容性用法,结合实例形式分析了javascript使用setAttribute进行属性设置操作的相关使用技巧,需要的朋友可以参考下
      2016-12-12
    • 深入理解js generator数据类型

      深入理解js generator数据类型

      下面小编就为大家带来一篇深入理解js generator数据类型。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2016-08-08
    • js本身的局限性 别让javascript做太多事

      js本身的局限性 别让javascript做太多事

      最近常有人在Q群里发问诸如"怎样让js操作文件"、"怎样让js实现多线程"等问题。
      2010-03-03
    • 微信小程序npm引入vant-weapp的踩坑记录

      微信小程序npm引入vant-weapp的踩坑记录

      这篇文章主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
      2019-08-08
    • JavaScript判断变量是否为空的自定义函数分享

      JavaScript判断变量是否为空的自定义函数分享

      这篇文章主要介绍了JavaScript判断变量是否为空的自定义函数分享,本文直接给出实现代码,需要的朋友可以参考下
      2015-01-01
    • javascript事件函数中获得事件源的两种不错方法

      javascript事件函数中获得事件源的两种不错方法

      许多情况我们需要获得事件源对象来对其属性进行更改,在事件响应函数中获得事件源的方法有如下两种
      2014-03-03
    • 可插入图片的TEXT文本框

      可插入图片的TEXT文本框

      这篇文章主要介绍了可插入图片的TEXT文本框,有需要的朋友可以参考一下
      2013-12-12
    • 学习RxJS之JavaScript框架Cycle.js

      学习RxJS之JavaScript框架Cycle.js

      这篇文章主要介绍了学习RxJS之JavaScript框架Cycle.js ,它是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口,需要的朋友可以参考下
      2019-06-06

    最新评论

  • 在庆祝海南建省办经济特区30周年大会上的讲话 2019-10-07
  • 俄罗斯世界杯F组:球迷风采 2019-09-24
  • 彭于晏廖凡曝姜文“精神洁癖” 2019-09-24
  • 苏州大学研究生支教团网上众筹资助留守儿童 2019-09-23
  • 湖北政务微信排行榜第187期出炉 交警类公号表现亮眼 2019-09-19
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-08-31
  • 母亲节又送康乃馨?送这样的健康佳品才走心 2019-08-30
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-08-26
  • 兰芝雪纱修颜气垫隔离霜 2019-07-27
  • “鹊桥”中继星顺利进入使命轨道运行 2019-07-27
  • 超越舆情管理的360度信息决策 2019-07-22
  • 视频陶然居变形记:从路边小饭馆到全国餐饮十强 2019-07-21
  • 防震减灾事业发展的重要理论成果 2019-07-20
  • 珠宝配美人!李冰冰大片衣着性感秀身段 2019-07-20
  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 足球计算器让球胜平负 香港开码现场开奖结果 助赢计划软件app手机版下载 128棋牌app 火山直播丑女无敌甜甜 重庆时时彩 浙江12选5开奖实时结果 麻将规则公式 时时彩四期计划稳赚 pt电子游戏放水规律