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的其他方面的知识。

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