我的一個配置redux(實現一次儲存與呼叫方法)之旅
前言 : 今天呢,就配置一下redux,redux的重要性呢,就叭叭叭一大堆,什麼也沒有帶著配置一次來的重要,因為許多涉及到的屬性和方法,用法是活的,但格式是需要記憶的。
過程中不要嫌我嘮叨,有的地方為了便於理解和記憶,反而會繞一下,配置redux的確比較麻煩,用到我們平時不常用的方法,我們不熟悉他們,所以會使用過程需要記憶。
(1)首先呢,安裝redux環境
一個穩定版的redux和一個redux繫結庫
1 npm install redux --save 2 npm install react-redux --save
本行程式碼純屬友情贈送,看到了就是賺到了,一個redux開發者工具
npm install redux-devtools --save-dev
是在這裡用滴:
然後我們檢查package,已經完成。
(2)現在呢,感受這3個重要的概念action,reducer以及store。
Action 作用:
1、用Action來分辨具體的執行動作。比如我是要新增一個專案還是刪除一個專案。
2、操作資料首先得有資料。比如新增資料得有資料,刪除資料得有ID。action就是存這些資料的地方。
3、不帶其他資料,僅僅啟示已有資料需要如何調整,或者需要主動獲取哪些資料。如果我要刪除掉全部資料,只要告知這件事即可
Reducer的作用:
官方描述:Action 只是描述了有事情發生了這一事實,並沒有指明應用如何更新 state。這是 reducer 要做的事情。
這麼說吧,Action就像一個指揮者,告訴我們應該做哪些事,比如我要刪除,reducer就會給我們提供‘資源(就是上面說的資料)’,真正的體力勞動者是reducer。
也就是說,action裡面的每一種描述,比如新增啦,刪除一個,刪除全部啦,reducer都有一個對應的函式來處理資料。之後返回給你一個新的state
reducer 只是一個模式匹配的東西,真正處理資料的函式,是額外在別的地方寫的,在 reducer 中呼叫罷了。
※:reducer:縮減 (我們用來寫方法的)因為 action 物件各種各樣,每種對應某個 case ,但最後都彙總到 state 物件中,從多到一,這是一個減少( reduce )的過程,所以完成這個過程的函式叫 reducer。
Store:
前面兩個,我們知道使用 action 來描述“發生了什麼”,和使用 reducers 來根據 action 更新 state 的用法。
Store 就是把它們聯絡到一起的物件。Store 有以下職責:
- 維持應用的 state;
- 提供 getState() 方法獲取 state;
- 提供 dispatch(action) 方法更新 state;
- 通過 subscribe(listener) 註冊監聽器
(3)接下來建立actions資料夾,再新建一個reducers資料夾,並建立各自的index.js。
建立資料夾不截圖了。。。index先空著,等下補充。
(4)我們需要將actions和reducers關聯起來(截圖對比程式碼,菜鳥請注意)
未修改的src的index.js:
現在呢,從react-redux庫裡,調出Provider方法,從redux裡拿出creatStore方法。
import { Provider } from 'react-redux'; import { creatStore } from 'redux';
React-Redux提供了兩個介面Provider、connect。
Provider 是一個React元件,它的作用是儲存store給子元件中的connect使用。
connect 會把State和dispatch轉換成props傳遞給子元件。我的理解是,因為所有的資料都集中在了 store中,Provider從那裡把store的資料拿了過來。給它的好朋友 connect,connect是聯絡,連線的意思嘛,所以它將好朋友provider的資料拿了過來,讓它供那些子元件使用。
import rootReducer from "./reducers"
將reducers檔案引入(如果是引入檔案,預設引入的是index.js)。
我們建立一個倉庫store:我們用建立庫方法來以存放應用中所有的 state。
const store = createStore(rootReducer)
用Provider包裹App模組,然後作為Hello模組丟擲,在根節點中渲染
const store = createStore(rootReducer) export default class Hello extends Component { render() { return ( <Provider store={ store }> <div> <App/> </div> </Provider> ) } } ReactDOM.render(<Hello />, document.getElementById('root'));
最後的程式碼是這個樣子的(執行之後包Component報錯的,注意看圖片上的第一個藍框):
這段程式碼的作用,總體上來說應該這樣表述:
我建立了一個Hello模組來給大家展示redux,建立Hello模組將App標籤包裹,但是,我們用Provider元件將return出來的東西包裹,connect方法生成容器元件以後,需要讓容器元件拿到state物件,才能生成 UI 元件的引數。這樣,App的所有子元件就預設都可以拿到state了。同時,我們直接渲染到root根節點的App也就改成了Hello。
(5)接下來配置reducers的index.js
在這個index裡,我們要做的,就是將裡面所有的小的reducers整合起來,然後丟擲。我這裡假設用page01和page02來分開管理小的reducers,當然,你不嫌麻煩可以把所有的功能都寫在主檔案裡。
我的page1和2裡都沒有寫方法,等下再進行功能的編寫。
(6)配置actions裡面的index.js
在這個index,我們要做的呢,是將所有的方法丟擲,也是兩個空的,額,等下就寫。。。
(7)執行除錯
這次執行呢,就是看看我的元件能不能正常載入。。。因為你沒仔細看我的index.js裡的第一個藍框,就有可能報這個錯:
其他錯誤請自己逐漸除錯,因為我的已經正常執行。
(8)既然搭建了redux,然後我們要實現一個方法,點選自增。。。
(笑噴了自己,這個方法是演示方法中,最常用也是最low的demo,自己認為。。。)
註釋給的很詳細了
(9)配置reducer的counter1
我們把方法反出去,這裡是把自增的方法反出去了
(10)主元件的一些個操作(兩張圖並一張):
註釋已經很清楚了
mapStateToProps 是一個函式(函式名可以自定義),它的作用就像它的名字那樣,建立一個從(外部的)state物件到(UI元件的)props物件的對映關係。由此你就可以推測,mapDispathToProps的意思和這個是差不多的,分發方法。
(11)此時的頁面效果:
我點選的效果:
恭喜自己,功能實現了。
(12)程式碼給你們(index的)
1 import React, { Component } from 'react' 2 3 import './App.css'; 4 5 import { connect } from "react-redux" //從react-redux裡拿到connect方法 6 import { counterCreator } from "./actions" //暴露counterCreator這個方法 7 8 class App extends Component { 9 constructor(props){ 10 super(props) 11 this.state={} 12 } 13 14 handleClick=()=>{ 15 this.props.numAdd() 16 } 17 18 render() { 19 return ( 20 <div className='Box'> 21 <h3>{this.props.$$num}</h3> 22 <button onClick={this.handleClick}>點選自增</button> 23 </div> 24 ) 25 } 26 } 27 28 //資料 29 const mapStateToProps = (state) => { 30 console.log(state) 31 return { 32 $$num : state.page01.num //$$只是一個標識,建議加 33 } 34 } 35 36 //dispatch 分發方法 37 const mapDispathToProps = (dispatch) => { 38 return{ 39 numAdd : () => dispatch(counterCreator.numAdd()) 40 } 41 } 42 43 //connect 高階元件、高階函式 傳入一個元件=>返回一個新的元件 44 export default connect( 45 mapStateToProps, 46 mapDispathToProps 47 )(App)
感悟:暫時憑自己的知識儲備是配置不了的,希望自己一直進步,學不會的時候,千萬別停下來,戒驕戒躁,加油!
&n