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