React进阶(3)-上手实践Redux-如何改变store中的数据
雖互不曾謀面,但希望能和你成為筆尖下的朋友
以讀書,技術(shù),生活為主,偶爾撒點(diǎn)雞湯
不作,不敷衍,意在真誠吐露,用心分享
點(diǎn)擊左上方,可關(guān)注本刊
（祝今日天下有情人終成兄妹)
撰文?| 川川
VX-ID:suibichuanji
什么?文章內(nèi)容不夠看,等等..
點(diǎn)擊文末左下方閱讀原文,可看視頻學(xué)習(xí)
? ?
前言
在前面的一文React進(jìn)階(2)-上手實(shí)踐Redux-如何獲取store的數(shù)據(jù)當(dāng)中,已經(jīng)知道組件怎么獲取store的數(shù)據(jù),并渲染到頁面上,那么在該節(jié)當(dāng)中揭示怎么更改store的數(shù)據(jù),實(shí)現(xiàn)頁面的更新
您將在本文當(dāng)中學(xué)到
編寫action代碼,確定具體要做的事情,它只負(fù)責(zé)創(chuàng)建對象
改變store數(shù)據(jù)的唯一方法就是要派發(fā)action,需要通過調(diào)用store.dispatch函數(shù)
reducer純函數(shù)中實(shí)現(xiàn)數(shù)據(jù)更新等邏輯判斷操作?
觸發(fā)store,注冊訂閱subscribe函數(shù),監(jiān)聽store數(shù)據(jù)的變化,保持頁面的狀態(tài)與store的同步
重新獲取store的數(shù)據(jù),最終實(shí)現(xiàn)頁面數(shù)據(jù)狀態(tài)的更新
......
文章內(nèi)容略有些長,建議扯紙的時間閱讀,比較基礎(chǔ),如理解有誤,歡迎路過的老師多提意見和指正
下面就一起來編寫todolist的添加,刪除等代碼的,最終的效果圖如下所示
(添加,刪除todolist操作)
如何改變store的數(shù)據(jù),實(shí)現(xiàn)頁面的更新？
在前文的示例代碼中已經(jīng)知道組件怎么從store中取數(shù)據(jù)了,然而現(xiàn)在,如果想要更新state的數(shù)據(jù)?怎么辦?
在reducer函數(shù)接收的第二個參數(shù)action就是接下來要干的事情了
在Redux中為了能夠查看store中的各個狀態(tài),在chrome瀏覽器需先安裝一個redux Devtools這個調(diào)試工具
當(dāng)然安裝這個插件,需要科學(xué)上網(wǎng).如果沒有的話,在qq瀏覽器的插件市場里也是能夠找得到的
qq瀏覽器各種插件也是應(yīng)有盡有,與在chrome控制臺里調(diào)試是一樣的
方式一:創(chuàng)建store的時候,進(jìn)行composeEnhancers構(gòu)建增強(qiáng)型的應(yīng)用,在代碼里添加配置,將window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),這行代碼配置添加到createStore()的第二個參數(shù)上
const?store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); // createStore第二個參數(shù)添加這個redux-devtools的配置可以開啟調(diào)試功能(需要瀏覽器安裝redux-devtools插件)
（需要按照文檔,對創(chuàng)建的store倉庫配置一下）
（配置完后,刷新瀏覽器Redux調(diào)試工具就會出現(xiàn)了）
方法二:終端下安裝redux-devtools-extension
npm install --save redux-devtools-extension然后在主頁面入口代碼里,添加redux-devtools-extension拓展,同時引入applyMiddleware應(yīng)用中間件,并在componseWidthDevTools中調(diào)用,如下所示
import?{ createStore, applyMiddleware } from?'redux';? import?{ composeWithDevTools } from?'redux-devtools-extension';const?store = createStore(reducer, composeWithDevTools(applyMiddleware() ));以上兩種方法都可以開啟Redux的調(diào)試功能,第二種方法比較強(qiáng)大,推薦使用,這種配置完后,在各個瀏覽器都是可以使用的,至于其他一些額外拓展功能的,在后續(xù)的文章中,會不斷會講到
具體更改store的實(shí)例代碼如下所示:
import?React from?'react'; import?ReactDOM from?'react-dom'; import?{ Input, Button, List } from?'antd'; // 引入antd組件庫 import?'antd/dist/antd.css'; // 引入antd樣式// 1. 創(chuàng)建一個store管理倉庫,從redux庫中引入一個createStore函數(shù) import?{ createStore } from?'redux';// 2. 引入createStore后,store并沒有創(chuàng)建,需要調(diào)用createStore()后才有store const?store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); // 創(chuàng)建好reducer后,需要將reducer作為參數(shù)傳到createStore當(dāng)中去,這樣store才能拿到reducer的state數(shù)據(jù)// 3. 創(chuàng)建reducer函數(shù),管理組件共享的數(shù)據(jù)狀態(tài)以及一些動作 // reducer是一個純函數(shù),返回一個新的state給store // 4. 初始化state值,將原先組件內(nèi)部的狀態(tài)的數(shù)據(jù),移除到reducer里面去管理 function?reducer(state = {inputValue: 'itclanCoder',list: ['itclanCoder', '川川', '學(xué)習(xí)Redux'] }, action){console.log(state, action);if(action.type === 'handle_Input_Change'){// 對原有的上一次的state做一次深拷貝,在Redux中,reducer不允許直接修改state// const newState = Object.assign({}, state);這個Object.assign()也是一個非常常用淺拷貝的方法,與下面的方法最終實(shí)現(xiàn)的效果是一致的,等價(jià)于下面的方法// 創(chuàng)建了一個newState完全復(fù)制了state,通過對newState的修改避免了對state的修改const?newState = JSON.parse(JSON.stringify(state));newState.inputValue = action.value; // 將新的value值賦值給newStatereturn?newState;}return?state; }// TodoList組件 class?TodoList?extends?React.Component?{constructor(props){super(props);// 5. 在組件內(nèi)部通過getState()方法就可以拿到store里面的數(shù)據(jù)this.state = store.getState();// this環(huán)境的綁定this.handleInputChange = this.handleInputChange.bind(this);this.handleStoreChange = this.handleStoreChange.bind(this);// 觸發(fā)訂閱,讓store感知到state的變化store.subscribe(this.handleStoreChange); // 接收一個函數(shù),重新獲取store最新的數(shù)據(jù),subscribe里面必須接收一個函數(shù),會自動的調(diào)用this.handleStoreChange這個方法,保持store上的狀態(tài)和this.state的同步,否則是會報(bào)錯的,這個訂閱函數(shù)放在componentWillMount或者componentDidMount生命周期函數(shù)內(nèi)監(jiān)聽數(shù)據(jù)的變化,只要store狀態(tài)發(fā)生了改變,那么就會調(diào)用這個handleStoreChange函數(shù)}// componentWillMount(){// store.subscribe(this.handleStoreChange);// }// 組件卸載,移除時調(diào)用該函數(shù),一般取消,清理已注冊的訂閱,定時器的清理,取消網(wǎng)絡(luò)請求,在這里面操作componentWillUnmount(){store.unsubscribe(this.handleStoreChange); // 取消訂閱,清理已注冊的監(jiān)聽}render() {return?(<div style={{ margin: "10px 0 0 10px"}}><div><Input onChange={this.handleInputChange} value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}} placeholder="請輸入內(nèi)容..." /><Button type="primary">提交</Button></div><Liststyle={{ width: '300px',marginTop:'10px'}}bordereddataSource={this.state.list}renderItem={item => <List.Item>{item}</List.Item>}/></div>)}handleInputChange(e){console.log(e.target.value);// 定義action,確定一個操作,動作,注意action必須遵循一定的規(guī)范,是一個對象,type字段是確定要做的動作,類型,監(jiān)聽表單輸入框的變化,value是輸入框的值const action = {type: 'handle_Input_Change',value: e.target.value}store.dispatch(action); // 通過store派發(fā)dispatch一個action,只有這里接收一個action,Reducer里面才能對新舊數(shù)據(jù)進(jìn)行計(jì)算等操作,改變store中狀態(tài)的唯一方法就是派發(fā)action}handleStoreChange(){console.log("handleStorechange,觸發(fā)了");this.setState(store.getState()); // 觸發(fā)setState重新獲取store的數(shù)據(jù),讓input的數(shù)據(jù)與store保持同步了的} } const container = document.getElementById('root');ReactDOM.render(<TodoList />, container);具體的效果如下所示
通過上面新添加的action代碼,實(shí)現(xiàn)一個更改store的數(shù)據(jù),并達(dá)到了與頁面更新的操作
再次來梳理一下更改store的數(shù)據(jù)的一個過程,經(jīng)歷了哪些具體操作
1. 瀏覽器里添加redux-devtools,在創(chuàng)建store的createStore()的第二個參數(shù)中添加redux-devtools插件的配置,使瀏覽器支持Redux查看store的各種狀態(tài)
const?store = createStore(reducer,?window.__REDUX_DEVTOOLS_EXTENSION__ &&?window.__REDUX_DEVTOOLS_EXTENSION__());2. 給Input組件綁定onChange事件監(jiān)聽事件處理函數(shù)
定義action對象,確定動作類型,這個action必須遵循一定的規(guī)則,得是一個對象,當(dāng)然在后續(xù)當(dāng)中,怎么支持函數(shù),又是另外的知識了的
3. 通過store的dispatch方法,接收action對象,告知store,有action這么一個事件動作,改變store中的狀態(tài)的唯一方法就是派發(fā)action
如下實(shí)例代碼所示
<Input onChange={this.handleInputChange}>handleInputChange(e){const?action = {?// 定義action，action必須是一個對象type:?'handle_input_change',value: e.target.value}store.dispatch(action);?// 派發(fā)dispatch,將action傳遞給store }4. 在Reducer中會接收到action,通過if等判斷,確定要執(zhí)行state的操作,這個reducer必須是個純函數(shù),要有返回值,返回的結(jié)果會返回給store,這里的state是上一次(原先)組件的狀態(tài)
這里需要格外注意的是:
reducer可以接收state的值,但是不能直接修改state的值,當(dāng)拿到state的數(shù)據(jù)后,需要先拷貝一份原先state的數(shù)據(jù),在拷貝出新的數(shù)據(jù)基礎(chǔ)上進(jìn)行操作
創(chuàng)建了一個newState完全復(fù)制了state,通過對newState的修改避免了對state的修改
function?reducer(state, action){if(action.type ====?'handle_input_change'){// 對原有的state進(jìn)行一個深拷貝,在redux中,redux是不允許直接修改state的,但可以接收state,這也是為什么當(dāng)我們拿到state后,我們需要拷貝一份數(shù)據(jù),一個新的state出來// const newState = Object.assign({}, state);這個Object.assign()也是一個非常常用淺拷貝的方法,與下面的方法最終實(shí)現(xiàn)的效果是一致的const?newState =?JSON.parse(JSON.stringify(state));newState.inputValue = action.value;return?newState;?// 返回新的state}return?state; }其中值得一提的就是拷貝數(shù)據(jù)對象的方法:
Object.assign({}, state) // 等價(jià)于 JSON.parse(JSON.stringify(state));5. 當(dāng)執(zhí)行上述的操作后,當(dāng)組件想要感知store的變化,需要在constructor函數(shù)內(nèi)或者componentWillMount(在react17版本中將會被廢棄)或componentDidMount生命周期函數(shù)內(nèi)調(diào)用store的subscribe方法
個人推薦放在constructor或者componentDidMount中
同時它接收一個函數(shù) 這個其實(shí)是設(shè)計(jì)模式的訂閱者模式,觸發(fā)store的訂閱,當(dāng)store發(fā)生了變化,會自動的執(zhí)行該函數(shù)
保持store上的狀態(tài)和this.state的同步,監(jiān)聽數(shù)據(jù)的變化,只要store狀態(tài)發(fā)生了改變,那么就會調(diào)用這個handleStoreChange函數(shù)
subscribe(listener),用于注冊回調(diào),監(jiān)聽state的變化
store.subscribe(this.handleStoreChange)?// 這里面接收一個listen函數(shù),主要用來獲取新的store,這句代碼放在constructor或者componentwillMount以及componentDidMount中都是可以的 handleStoreChange(){this.setState(store.getState()) }6. 最后在組件移除時,銷毀時,在componentWillUnmount中取消store的訂閱事件
// 組件卸載,移除時調(diào)用該函數(shù),一般取消,清理已注冊的訂閱,定時器的清理,取消網(wǎng)絡(luò)請求,在這里面操作componentWillUnmount(){store.unsubscribe(this.handleStoreChange);}（給女盆友送件風(fēng)衣,脖子以下全是腿,拉風(fēng)就靠它了）
通過以上六個步驟,就完成了一次store的更新操作
你可以聯(lián)想到我們之前舉到的那個換房的例子的,租戶(組件)怎么獲取拿到房源具體信息,首先房產(chǎn)中介經(jīng)理會從內(nèi)部的系統(tǒng)(redux)中,引入一個createStore的方法,進(jìn)而創(chuàng)建一個store的倉庫,隨之創(chuàng)建一個實(shí)時記錄本(reducer)
真正的新老房信息的變更操作都是在reducer這個函數(shù)中完成的,并且它是一個純函數(shù),必須要有返回值
在Reducer函數(shù)中,接收兩個參數(shù),第一個是上一次組件的狀態(tài)值,而第二個是組件具體的動作action,具體要干的什么事情
在reducer中,規(guī)定只能讀取state的數(shù)據(jù),并不能直接修改state的數(shù)據(jù),而且返回的結(jié)果是根據(jù)state與action(用戶指定的動作)共同決定
其最新的結(jié)果返回給房產(chǎn)中介經(jīng)理手中(store),在reducer創(chuàng)建完之后,必須要將reducer作為參數(shù),讓createStore函數(shù)接收,這樣store才真正的擁有了state的數(shù)據(jù)
那么此刻,租戶(組件)想要獲取房源信息,則引入store,在一開始constructor函數(shù)或者componentWillMount函數(shù)中,調(diào)用getState()方法,從而獲得了state的數(shù)據(jù),最終顯示到頁面上
而如果想要更改store的數(shù)據(jù),租戶想要換攜帶有沙發(fā),電視等大房子,這個具體的動作就是action,首先換房子是一個動作,在元素上綁定相應(yīng)的事件
在該監(jiān)聽事件內(nèi),定義一個action動作,確定要做的事件類型,這個action必須遵循一定的規(guī)則,必須是一個對象
定義好action動作后,store接收到這個action動作請求后,store想要獲取它的具體信息,便會派發(fā)一個使者dispatch,同時攜帶上action的具體動作信息,作為參數(shù)傳遞給dispatch方法
這樣的話store就真正的知道了具體的動作,而具體的數(shù)據(jù)變更等操作,需要在reducer這個實(shí)時記錄本中進(jìn)行變更操作,在reducer里面進(jìn)行一些邏輯判斷操作
并且在reducer中只能讀取state,并不能修改,如果想要修改,需要拷貝一份state出來,在新的state基礎(chǔ)上進(jìn)行操作,同時也要將這個新的state進(jìn)行返回.達(dá)到一個以新?lián)Q舊的操作
最后在組件中如何感知到store的變化,實(shí)現(xiàn)數(shù)據(jù)的同步更新呢,在redux中,需要在組件內(nèi)的constructor或者componentWillMount,componentDidMount函數(shù)中進(jìn)行觸發(fā)subscribe()函數(shù)
同時它必須接收一個函數(shù),觸發(fā)store的訂閱,在這個接收的函數(shù)當(dāng)中重新獲取一次store的數(shù)據(jù),保持視圖的this.state與store倉庫的state數(shù)據(jù)的同步更新
這樣的話,最終就完成了一次action的動作,頁面也隨之更新了
上面的代碼進(jìn)行了一次action,reducer的編寫,下面接著繼續(xù)的,做得并不完整,那怎么實(shí)現(xiàn)一個添加內(nèi)容的操作呢?
輸入框表單內(nèi)添加內(nèi)容,點(diǎn)擊右側(cè)的提交按鈕,將Input框的內(nèi)容添加到底下的列表當(dāng)中 具體效果如下所示
（添加list操作）
以下是完整的具體代碼
import?React from?'react'; import?ReactDOM from?'react-dom'; import?{ Input, Button, List, message } from?'antd'; // 引入antd組件庫 import?'antd/dist/antd.css'; // 引入antd樣式// 1. 創(chuàng)建一個store管理倉庫,從redux庫中引入一個createStore函數(shù) import?{ createStore } from?'redux';// 2. 引入createStore后,store并沒有創(chuàng)建,需要調(diào)用createStore()后才有store const?store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); // 創(chuàng)建好reducer后,需要將reducer作為參數(shù)傳到createStore當(dāng)中去,這樣store才能拿到reducer的state數(shù)據(jù)// 3. 創(chuàng)建reducer函數(shù),管理組件共享的數(shù)據(jù)狀態(tài)以及一些動作 // reducer是一個純函數(shù),返回一個新的state給store // 4. 初始化state值,將原先組件內(nèi)部的狀態(tài)的數(shù)據(jù),移除到reducer里面去管理 function?reducer(state = {inputValue: '',list: [] }, action){console.log(state, action);if(action.type === 'handle_Input_Change'){// 對原有的上一次的state做一次深拷貝,在Redux中,reducer不允許直接修改state// const newState = Object.assign({}, state);這個Object.assign()也是一個非常常用淺拷貝的方法,與下面的方法最終實(shí)現(xiàn)的效果是一致的,等價(jià)于下面的方法const?newState = JSON.parse(JSON.stringify(state));newState.inputValue = action.value; // 將新的value值賦值給newStatereturn?newState;}if(action.type === 'addInputcontent'){const?newState = JSON.parse(JSON.stringify(state));if(newState.inputValue === ''){message.error('輸入表單內(nèi)不能為空,請輸入內(nèi)容');}else{newState.list.push(newState.inputValue); // 往list數(shù)組中添加input的內(nèi)容newState.inputValue = '';return?newState; // 返回newState}}return?state; }// TodoList組件 class?TodoList?extends?React.Component?{constructor(props){super(props);// 5. 在組件內(nèi)部通過getState()方法就可以拿到store里面的數(shù)據(jù)this.state = store.getState();// this環(huán)境的綁定this.handleInputChange = this.handleInputChange.bind(this);this.handleStoreChange = this.handleStoreChange.bind(this);this.handleAddClick = this.handleAddClick.bind(this);// 觸發(fā)訂閱,讓store感知到state的變化store.subscribe(this.handleStoreChange); // 接收一個函數(shù),重新獲取store最新的數(shù)據(jù),subscribe里面必須接收一個函數(shù),否則是會報(bào)錯的,這個訂閱函數(shù)放在componentWillMount生命周期函數(shù)內(nèi)調(diào)用操作也是可以的}// componentWillMount(){// store.subscribe(this.handleStoreChange);// }render() {return?(<div style={{ margin: "10px 0 0 10px"}}><div><Input onChange={this.handleInputChange} value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}} placeholder="請輸入內(nèi)容..." /><Button type="primary" onClick={this.handleAddClick}>提交</Button></div><Liststyle={{ width: '300px',marginTop:'10px'}}bordereddataSource={this.state.list}renderItem={item => <List.Item>{item}</List.Item>}/></div>)}handleInputChange(e){console.log(e.target.value);// 定義action,確定一個操作,動作,注意action必須遵循一定的規(guī)范,是一個對象,type字段是確定要做的動作,類型,監(jiān)聽表單輸入框的變化,value是輸入框的值const action = {type: 'handle_Input_Change',value: e.target.value}store.dispatch(action); // 通過store派發(fā)dispatch一個action,只有這里接收一個action,Reducer里面才能對新舊數(shù)據(jù)進(jìn)行計(jì)算等操作,這是改變store數(shù)據(jù)的唯一的方法,必須要通過派發(fā)一個action給store}handleStoreChange(){console.log("handleStorechange,觸發(fā)了");this.setState(store.getState()); // 觸發(fā)setState重新獲取store的數(shù)據(jù),讓input的數(shù)據(jù)與store保持同步了的}// 添加列表的操作handleAddClick(){console.log("添加按鈕執(zhí)行了");// 定義action動作const action = {type: 'addInputcontent'}store.dispatch(action); // 還要將action傳遞給dispatch,這樣store才會接收到,這是改變store數(shù)據(jù)的唯一的方法,必須要通過派發(fā)一個action給store,必不可少的一步} } const container = document.getElementById('root');ReactDOM.render(<TodoList />, container);上面的代碼就完成一個添加列表的功能 在次梳理一下過程
給JSX元素,組件Button按鈕綁定事件
2.?在reducer函數(shù)中進(jìn)行邏輯判斷,數(shù)據(jù)變更等操作
if(action.type ===?'addInputcontent'){const?newState =?JSON.parse(JSON.stringify(state));if(newState.inputValue ===?''){message.error('輸入表單內(nèi)不能為空,請輸入內(nèi)容');}else{newState.list.push(newState.inputValue);?// 往list數(shù)組中添加input的內(nèi)容newState.inputValue =?'';?// 提交表單內(nèi)容后,讓表單內(nèi)容置空操作return?newState;?// 返回newState}}基于原有的代碼,添加這兩步就完成了一個添加列表的操作的 那么刪除列表的功能怎么實(shí)現(xiàn)呢? 以下是實(shí)現(xiàn)的效果
（刪除列表）
以下是具體的實(shí)例代碼
import?React?from?'react'; import?ReactDOM?from?'react-dom'; import?{ Input, Button, List, message, Modal }?from?'antd';?// 引入antd組件庫 import?'antd/dist/antd.css';?// 引入antd樣式// 1. 創(chuàng)建一個store管理倉庫,從redux庫中引入一個createStore函數(shù) import?{ createStore }?from?'redux';// 2. 引入createStore后,store并沒有創(chuàng)建,需要調(diào)用createStore()后才有store const?store = createStore(reducer,?window.__REDUX_DEVTOOLS_EXTENSION__ &&?window.__REDUX_DEVTOOLS_EXTENSION__());?// 創(chuàng)建好reducer后,需要將reducer作為參數(shù)傳到createStore當(dāng)中去,這樣store才能拿到reducer的state數(shù)據(jù)// 3. 創(chuàng)建reducer函數(shù),管理組件共享的數(shù)據(jù)狀態(tài)以及一些動作 // reducer是一個純函數(shù),返回一個新的state給store // 4. 初始化state值,將原先組件內(nèi)部的狀態(tài)的數(shù)據(jù),移除到reducer里面去管理 function?reducer(state = {inputValue:?'',list: [] }, action)?{console.log(state, action);if?(action.type ===?'handle_Input_Change') {// 對原有的上一次的state做一次深拷貝,在Redux中,reducer不允許直接修改state// const newState = Object.assign({}, state);與下面的是等價(jià)的const?newState =?JSON.parse(JSON.stringify(state));newState.inputValue = action.value;?// 將新的value值賦值給newStatereturn?newState;}if?(action.type ===?'addInputcontent') {const?newState =?JSON.parse(JSON.stringify(state));if?(Trim(newState.inputValue) ===?'') {message.error('輸入表單內(nèi)不能為空,請輸入內(nèi)容');}?else?{newState.list.push(newState.inputValue);?// 往list數(shù)組中添加input的內(nèi)容newState.inputValue =?'';return?newState;?// 返回newState}}if?(action.type ===?'deletelist') {// 下面這個也是拷貝原對象的一種方式與上面等價(jià)const?newState =?Object.assign({}, state);newState.list.splice(action.index,?1);return?newState;}return?state; }// 去除前后空格 function?Trim(str)?{return?str.replace(/(^\s*)|(\s*$)/g,?""); } const?{ confirm } = Modal // TodoList組件 class?TodoList?extends?React.Component?{constructor(props) {super(props);// 5. 在組件內(nèi)部通過getState()方法就可以拿到store里面的數(shù)據(jù)this.state = store.getState();// this環(huán)境的綁定this.handleInputChange =?this.handleInputChange.bind(this);this.handleStoreChange =?this.handleStoreChange.bind(this);this.handleAddClick =?this.handleAddClick.bind(this);// 觸發(fā)訂閱,讓store感知到state的變化store.subscribe(this.handleStoreChange);?// 接收一個函數(shù),重新獲取store最新的數(shù)據(jù),subscribe里面必須接收一個函數(shù),否則是會報(bào)錯的,這個訂閱函數(shù)放在componentWillMount生命周期函數(shù)內(nèi)調(diào)用操作也是可以的}// componentWillMount(){// store.subscribe(this.handleStoreChange);?// }// 組件卸載,移除時調(diào)用該函數(shù),一般取消,清理已注冊的訂閱,定時器的清理,取消網(wǎng)絡(luò)請求,在這里面操作componentWillUnmount() {store.unsubscribe(this.handleStoreChange);}render() {return?(<div style={{ margin: "10px 0 0 10px"}}><div><Input onChange={this.handleInputChange} value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}} placeholder="請輸入內(nèi)容..." /><Button type="primary" onClick={this.handleAddClick}>提交</Button></div><Liststyle={{ width: '300px',marginTop:'10px'}}bordereddataSource={this.state.list}renderItem={(item,index) => <List.Item onClick={this.handleDelList.bind(this, index,item)}>{item}</List.Item>}/></div>)}handleInputChange(e) {console.log(e.target.value);// 定義action,確定一個操作,動作,注意action必須遵循一定的規(guī)范,是一個對象,type字段是確定要做的動作,類型,監(jiān)聽表單輸入框的變化,value是輸入框的值const action = {type: 'handle_Input_Change',value: e.target.value}store.dispatch(action); // 通過store派發(fā)dispatch一個action,只有這里接收一個action,Reducer里面才能對新舊數(shù)據(jù)進(jìn)行計(jì)算等操作}handleStoreChange() {console.log("handleStorechange,觸發(fā)了");this.setState(store.getState()); // 觸發(fā)setState重新獲取store的數(shù)據(jù),讓input的數(shù)據(jù)與store保持同步了的}// 添加列表的操作handleAddClick() {console.log("添加按鈕執(zhí)行了");// 定義action動作const action = {type: 'addInputcontent'}store.dispatch(action); // 還要將action傳遞給dispatch,這樣store才會接收到}// 刪除列表操作handleDelList(index,item) {this.showDeleteConfirm(index, item);}showDeleteConfirm(index,item) {const action = {type: 'deletelist',index: index}confirm({title: '確定要刪除該列表?',content: item,okText: '確認(rèn)',okType: 'danger',cancelText: '取消',onOk() {console.log('OK');store.dispatch(action); // 想要改變store的數(shù)據(jù),必須通過dispatch派發(fā)一個action},onCancel() {console.log('Cancel');},});} } const container = document.getElementById('root');ReactDOM.render(<TodoList />, container);實(shí)現(xiàn)刪除列表的過程與添加列表差不多
1.?給列表綁定事件,添加事件處理函數(shù)
2.?在reducer函數(shù)中進(jìn)行對公共組件數(shù)據(jù)邏輯的操作
if?(action.type ===?'deletelist') {// 下面這個也是拷貝原對象的一種方式,也很常用const?newState =?Object.assign({}, state);newState.list.splice(action.index,?1);?// 這是刪除當(dāng)前列表的核心方法,通過數(shù)組的splice方法實(shí)現(xiàn),第一個參數(shù)代表的是刪除哪個,第二個是刪除一個return?newState;}至于上面添加了一個當(dāng)刪除列表時,模態(tài)框的確認(rèn)操作,至于添加一些組件是放在reducer里面還是放在外面,要視具體的業(yè)務(wù)邏輯而定
比如這里的刪除確認(rèn)模態(tài)框的,點(diǎn)擊列表時,彈出是否刪除的模態(tài)框,而具體是否要刪除,應(yīng)當(dāng)在onOk這個函數(shù)里面進(jìn)行派發(fā)action的,?如果你放到reducer里面做處理,那么始終會出現(xiàn)一些問題的,注意邏輯的操作順序
文章寫到這里,一個todolist的添加,刪除操作就完成了,當(dāng)然看到這樣的代碼,這么一個小小的demo操作,繞來繞去,估計(jì)奔潰了的,這樣的代碼堆疊在一起肯定是不行的
（放個妹子上來,讓閱讀產(chǎn)生靈魂震蕩,不疲勞）
在后續(xù)的學(xué)習(xí)當(dāng)中,我們將會把store,reducer,以及action進(jìn)行分開獨(dú)立管理的,之所以寫在一個文件里,是方便后續(xù)怎么樣將store,reducer,以及action抽離出去的
如果一上來就拆分,在各個文件之間進(jìn)行切換,對于初學(xué)者,是很容易繞暈的.當(dāng)然如果你是大神,就另當(dāng)別論了的
上面的代碼是次要的,重要的是理清Redux中store,React Component,action creators,reducer相互之間的關(guān)系,如果不清晰他們之間的關(guān)系,在遇到復(fù)雜的大型項(xiàng)目時,各個文件切來切去的,絕對是一頭霧水,懵逼的,維護(hù)起來也是想死的心都有
結(jié)語
本文并不是什么高大上的內(nèi)容,主要是對學(xué)習(xí)Redux的一個小小的初探,在真正實(shí)際項(xiàng)目中,復(fù)雜度遠(yuǎn)不止像這樣的一個例子的,但是作為入門,todolist確實(shí)能讓自己對Redux有一定的認(rèn)識
也許你會覺得這么個簡單的例子,竟然這么多代碼,使用vue的話,幾行代碼就搞定了,Vue中也有vuex這樣的數(shù)據(jù)流管理框架,使用起來也是大同小異,兩個各有優(yōu)點(diǎn),都很強(qiáng)
使用React編寫代碼更偏向底層一些的,雖然Redux比較繞,但都是有固定的套路流程的,其中理解Redux的工作流程是非常重要的
主要開始用ant-design這個UI組件庫對todolist做了一個簡單的布局,然后如何將組件的數(shù)據(jù)抽離到Redux中去管理
組件如何獲取Redux中store的數(shù)據(jù),以及怎么更新store的數(shù)據(jù)的更新,在上文當(dāng)中都有與之對應(yīng)的操作和解釋
用幾句簡單話:概括下使用Redux的流程
安裝redux,然后從redux中引入createStore這個方法,并調(diào)用它,從而創(chuàng)建store,
緊著在創(chuàng)建reducer純函數(shù),在reducer里面進(jìn)行state的邏輯操作,reducer的返回值取決于state與action這個的決定,最終該函數(shù)的返回的最新結(jié)果會返回給store,完成新舊數(shù)據(jù)的替換,
而在組件中如何獲取store的數(shù)據(jù),是通過getState方法進(jìn)行獲取store中的所有狀態(tài)
如何保持頁面的組件與store數(shù)據(jù)同步更新,需要注冊訂閱subscribe方法,該方法接收一個函數(shù),在該接收的函數(shù)內(nèi)觸發(fā)重新獲取store的數(shù)據(jù) 更多細(xì)枝末節(jié)內(nèi)容,可見上文
（世人都說男人一旦穿上西服,就秒變女神收割機(jī),這個我信)
往期推薦
React進(jìn)階(2)-上手實(shí)踐Redux-如何獲取store的數(shù)據(jù)
React進(jìn)階(1)-理解Redux
小程序-云開發(fā)基礎(chǔ)
React學(xué)習(xí)(八)-React中組件的生命周期
React學(xué)習(xí)(七)-React中的事件處理
贊 賞
【自我介紹】
作者:川川,一個靠前排的90后帥小伙,具有情懷的代碼男,路上正追逐斜杠青年的踐行者,愿做你耳朵旁邊的枕男,眼睛筆尖下的窗戶
勵志想做一個有趣和有錢的人，實(shí)在不行，光有錢也可以。
itclanCoder
添加微信suibichuanji
備注:坐標(biāo)-昵稱-身份(例如:帝都-川川-weber)
? ? ? ? ?
好知識,好經(jīng)驗(yàn)值得點(diǎn)再看一下！
點(diǎn)擊“閱讀原文”可看視頻內(nèi)容
總結(jié)
以上是生活随笔為你收集整理的React进阶(3)-上手实践Redux-如何改变store中的数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何自学电脑!
- 下一篇： ICPC2017 Naning - Th