函數(shù)組件與react-redux的使用

基于函數(shù)組件+redux+react-redux完成todolist的demo

demo地址:

https://github.com/jc5055/react-redux-hook

知識點(diǎn):

函數(shù)組件:

useState:定義組件當(dāng)前的state的屬性

//isShowDelBtn:定義變量营密,初始值為false封救,作用域為當(dāng)前組件
//setIsShowDelBtn:更新變量isShowDelBtn昂灵,作用域為當(dāng)前組件
 const [isShowDelBtn, setIsShowDelBtn] = useState(false)

//更新isShowDelBtn變量
setIsShowDelBtn(true)

useEffect:副作用函數(shù)答憔,useEffect(()=>{ return }, par2)通過par2參數(shù)的設(shè)置實(shí)現(xiàn)類組件函數(shù)中的狀態(tài)如‘ componentWillMount’,‘ componentDidUnmount’,‘ componentWillUpdate’

 useEffect(()=>{
        dispatch({
            type:actionType.GET_ALL_TODO
        })
    }, [dispatch])

useCallback: 用useCallback定義的回調(diào)函數(shù)我衬,傳遞給子組件幽纷,配合子組件的memo定義涂屁,減少不必要的組件刷新甸怕,與useEffect類似

useRef:組件內(nèi)獲取控件的輸入

//Top.js
//組件函數(shù)內(nèi)聲明
 const inputRef = useRef()

//input 標(biāo)簽賦值
 <input type="text"
                   placeholder="請輸入今天的任務(wù)清單甘穿,按回車鍵確認(rèn)"
                   onKeyDown={(event)=>{_handleKeyEvent(event)}}
                   ref={inputRef}
            />

//獲取值
const value = inputRef.current.value

redux:

使用redux目的是解決組件樹深度過大,屬性需要依次傳遞梢杭,代碼閱讀性和維護(hù)性差的問題温兼。使用redux基本要素:
大堂經(jīng)理根據(jù)用戶需求判斷具體的業(yè)務(wù)類型
銀行柜員更具業(yè)務(wù)類型,執(zhí)行具體的操作武契,從而實(shí)現(xiàn)用戶賬戶的更新

  • 1.store(銀行數(shù)據(jù)庫):類似數(shù)據(jù)庫用來存儲數(shù)據(jù)募判,數(shù)據(jù)只能被reducer訪問,
  • 2.reducer(銀行柜員):具體行為的操作咒唆,根據(jù)行為類型去執(zhí)行具體操作届垫,從而實(shí)現(xiàn)store里面的數(shù)據(jù)更新
  • 3.actionType(大堂經(jīng)理):具體代表類型

代碼實(shí)現(xiàn):

步驟一:定義行為類型actionType

//actionType.js
// 1. 存所有的Todo
const GET_ALL_TODO = 'get_all_todo'

export default {
    GET_ALL_TODO,
}

步驟二:定義行為操作reducer

reducer的基本形式為(state, action)=>{return state},
state為對應(yīng)reducer所控store里面的數(shù)據(jù);
action為具體行為全释,包括行為類型action.type装处, 行為參數(shù)action.payload

image.png

為了代碼可讀性,使用combineReducers對不通的reducer進(jìn)行合并成一個reducer浸船,賦值給store

import {combineReducers} from 'redux'
import todoReducer from './todoReducer'

export const reducer = combineReducers({
    todoReducer : todoReducer
})

步驟三:定義store

將reducer賦值給store妄迁,完成store的新建

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

export default store

至此完成了redux的基礎(chǔ)的定義:actionType, reducer, store

react-redux:

知識點(diǎn)一:Provider標(biāo)簽

import react-redux,在index.js文件用Provider標(biāo)簽對App標(biāo)簽包裹李命,使得App下的組件都能獲取store的值

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux'
import store from "./store/store";
ReactDOM.render(
  <Provider store={store}>
    <App />
   </Provider>,
  document.getElementById('root')
);

知識點(diǎn)二:useSelector

在子組件中import react-redux的API useSelector可以獲取sotre對應(yīng)的數(shù)據(jù)登淘。
考慮到使用combineReducers的將不通的reducer進(jìn)行合并,因此要獲取特定reducer設(shè)定的store數(shù)據(jù)项戴,需要加上對應(yīng)的reducer key如下文

//index.js 在此文件將不通的reudcer進(jìn)行統(tǒng)一
import {combineReducers} from 'redux'
import todoReducer from './todoReducer'

export const reducer = combineReducers({
    todoReducer : todoReducer
})


//Top.js在此文件獲取todoReducer下聲明的store的數(shù)據(jù)
import {useSelector, useDispatch} from 'react-redux'
const todos = useSelector(state => state.todoReducer.todos)

知識點(diǎn)三:useDispatch

useDispatch的作用是在子組件中形帮,可以觸發(fā)對應(yīng)的reducer的行為操作槽惫,進(jìn)而實(shí)現(xiàn)對store的數(shù)據(jù)更新。具體操作步驟

  • 1.import {useDispatch}from 'react-redux'
  • 2.在函數(shù)組件中定義對象const dispatch = useDispatch()
  • 3.dispatch((type,payload))的方式傳遞行為類型和行為所需要的參數(shù)
  • 4.react-redux會監(jiān)聽行為辩撑,改變store存儲的數(shù)據(jù)
//App.js
import {useSelector, useDispatch} from 'react-redux'
useEffect(()=>{
        dispatch({
            type:actionType.GET_ALL_TODO
        })
    }, [dispatch])

// Top.js
    const dispatch = useDispatch()

    const _handleKeyEvent = (e)=>{
        const lastTodoId = todos.length === 0 ? 0: todos[todos.length - 1].id
        if (13 === e.keyCode){
            const value = inputRef.current.value
            if (!value.trim()){
                alert('輸入的內(nèi)容不為空')
                return
            }
            const todo = {id:lastTodoId, title:value, finished:false}
            dispatch({
                type: actionType.ADD_ONE_TODO,
                payload: todo
            })
            inputRef.current.value = ''
        }
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末界斜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子合冀,更是在濱河造成了極大的恐慌各薇,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件君躺,死亡現(xiàn)場離奇詭異峭判,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)棕叫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進(jìn)店門林螃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人俺泣,你說我怎么就攤上這事疗认。” “怎么了伏钠?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵横漏,是天一觀的道長。 經(jīng)常有香客問我熟掂,道長缎浇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任赴肚,我火速辦了婚禮素跺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘尊蚁。我一直安慰自己亡笑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布横朋。 她就那樣靜靜地躺著仑乌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪琴锭。 梳的紋絲不亂的頭發(fā)上晰甚,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天,我揣著相機(jī)與錄音决帖,去河邊找鬼厕九。 笑死,一個胖子當(dāng)著我的面吹牛地回,可吹牛的內(nèi)容都是我干的扁远。 我是一名探鬼主播俊鱼,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼畅买!你這毒婦竟也來了并闲?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤谷羞,失蹤者是張志新(化名)和其女友劉穎帝火,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體湃缎,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡犀填,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了嗓违。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片九巡。...
    茶點(diǎn)故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蹂季,靈堂內(nèi)的尸體忽然破棺而出比庄,到底是詐尸還是另有隱情,我是刑警寧澤乏盐,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站制恍,受9級特大地震影響父能,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜净神,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一何吝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鹃唯,春花似錦爱榕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至洪橘,卻和暖如春跪者,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背熄求。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工渣玲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人弟晚。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓忘衍,卻偏偏與公主長得像逾苫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子枚钓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容