React+Antd+Redux實(shí)現(xiàn)待辦事件的方法

2019-11-19 11:59:42

字體：大中小

供稿：網(wǎng)友

之前也是寫過一篇關(guān)于Redux的文章，來簡(jiǎn)單理解一下Redux,以及該如何使用。今天我就來分享一個(gè)也是入門級(jí)別的，React+Redux+antd來實(shí)現(xiàn)簡(jiǎn)單的待辦事件。同時(shí)也講講自己對(duì)Redux的理解。先來看一張圖吧：

我們簡(jiǎn)單的比喻來讓我們更加好的理解Redux，我們這樣比喻(圖書館借書)：
1.React Component:借書人
2.Action Creators:你要說你要借書這句話，肯定要說話吧，就是一句話：我要借書
3.Store:圖書館管理員
4.Reducer:圖書館管理員肯定不可能記得所有書，那么Reducer就是作為一本小冊(cè)子，供圖書館管理員查

通俗理解：我要借書，我要先說話，告訴圖書館管理員我要借書，當(dāng)圖書館管理員知道了之后，但是它不可能知道所有的書籍在哪里，所以需要一本小冊(cè)子去找，最后找到了之后，再送到你手上。
專業(yè)術(shù)語理解：(Component)要借書，我要先說話(Action )，告訴圖書館管理員(Store)我要借書，當(dāng)圖書館管理員知道了之后，但是它不可能知道所有的書籍在哪里，所以需要一本小冊(cè)子(Reducer)去找，最后找到了之后，再送到你(Component)手上。

當(dāng)你看圖覺得蒙的時(shí)候你再看看這個(gè)比喻是不是更好理解了？流程我們大概清楚了，我們就開始來看怎么寫這個(gè)待辦事項(xiàng)吧。
我們先來列一個(gè)提綱吧，屢清楚思路再寫代碼。
1.react component（todolist.js）
2.引入antd
3.寫store
4.寫reducer
5.寫action

大概就是上面的一些流程：

如何引入antd呢？

官方文檔：鏈接描述

文件目錄結(jié)構(gòu)如下：

創(chuàng)建文件之前，首先創(chuàng)建圖書館管理員(store)，他不知道書具體在哪里，所以再創(chuàng)建小冊(cè)子(redux)，給到圖書館管理員(store)：

//src/redux/index.jsimport {createStore} from 'redux';import reducer from './reducer'const store=createStore(reducer);export default store;

//src/redux/reducer.jsconst defaultState={  inputValue:'',  list:[1,2]}export default(state=defaultState,action)=>{  return state;}

*注釋：剛開始state，這里一定要給state賦一個(gè)初始值，才不會(huì)報(bào)錯(cuò)

接下來你就可以，在todolist.js中用store.getState()獲取到store的值,我把他直接賦值給狀態(tài):

我先實(shí)現(xiàn)一個(gè)由Component發(fā)送action,store收到action,在由reducer接受處理，最后返回一個(gè)新的狀態(tài)，Component接收顯示：

//src/redux/TodoList.jsimport 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="請(qǐng)輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>        </div>      </div>    );  }  }

思路：我們通過input框中監(jiān)聽內(nèi)容變化發(fā)送action,reucer去處理

//src/redux/reducer.jsconst 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看一下，你就會(huì)發(fā)現(xiàn)inputValue就是你輸入的值了。

接下來的就可以舉一反三了。

完整代碼：

///src/redux/index.jsimport {createStore} from 'redux';import reducer from './reducer'const store=createStore(reducer);

///src/redux/reducers.jsexport 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.jsimport 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="請(qǐng)輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>        <Button type="primary" onClick={this.handleSend}>發(fā)送</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.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import TodoList from './redux/TodoList';ReactDOM.render(<TodoList />, document.getElementById('root'));

這樣就實(shí)現(xiàn)了一個(gè)利用redux來實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng).

相信你如果寫完這個(gè)demo之后，肯定對(duì)Redux大致有了了解。如果自己在寫的過程中有什么疑惑，歡迎提出，我會(huì)給你解答。后期也會(huì)更新一些關(guān)于Redux的其他方面的知識(shí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：Node.js + express實(shí)現(xiàn)上傳大文件的方法分析【圖片、文本文件】

下一篇：Node.js + express基本用法教程