之前也是寫過一篇關于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.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賦一個初始值，才不會報錯
接下來你就可以，在todolist.js中用store.getState()獲取到store的值,我把他直接賦值給狀態:
我先實現一個由Component發送action,store收到action,在由reducer接受處理，最后返回一個新的狀態，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="請輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/> </div> </div> ); } }思路：我們通過input框中監聽內容變化發送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看一下，你就會發現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="請輸入" 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.jsimport 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的其他方面的知識。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
