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

更新时间：2019年03月14日 09:53:47 作者：乘风破浪

这篇文章主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

之前也是写过一篇关于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的其他方面的知识。

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

您可能感兴趣的文章:

React组件三大核心属性State props Refs介绍
组件实例的三大核心属性是：State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this，也就不存在组件实例这种说法，但由于它的特殊性（函数可以接收参数），所以存在Props这种属性
2023-02-02
React Antd中如何设置表单只输入数字
这篇文章主要介绍了React Antd中如何设置表单只输入数字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
React Native之TextInput组件解析示例
本篇文章主要介绍了React Native之TextInput组件解析示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
完美解决react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
这篇文章主要介绍了react-codemirror2编辑器需点击一下或者延时才显示数据的问题,解决方法也很简单，需要手动引入自动刷新的插件，配置一下参数就可以了，本文给大家介绍的非常详细，需要的朋友可以参考下
2023-08-08
React diff算法的实现示例
这篇文章主要介绍了React diff算法的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
useReducer createContext代替Redux原理示例解析
这篇文章主要为大家介绍了useReducer createContext代替Redux原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React渲染机制超详细讲解
React整个的渲染机制就是React会调用render()函数构建一棵Dom树，在state/props发生改变的时候，render()函数会被再次调用渲染出另外一棵树，重新渲染所有的节点，构造出新的虚拟Dom tree
2022-11-11
React中10种Hook的使用介绍
Hook 是 React 16.8 的新增特性，本文主要介绍了10种Hook的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
一文详解React类组件中的refs属性
react中的ref类似于vue中的ref,都是可以操作dom的,这篇文章我们通过一个demo来学习这个属性,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-08-08
浏览器中视频播放器实现的基本思路与代码
这篇文章主要给大家介绍了关于浏览器中视频播放器实现的基本思路与代码,并且详细总结了浏览器中的音视频知识,对大家的理解和学习非常有帮助,需要的朋友可以参考下
2021-08-08

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具