這篇文章給大家分享的是有關(guān)redux的核心是什么的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
站在用戶的角度思考問題,與客戶深入溝通,找到田陽網(wǎng)站設(shè)計與田陽網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋田陽地區(qū)。概念
redux是一種架構(gòu)模式,可以和react、vue結(jié)合使用。
解決的問題
優(yōu)雅地修改共享數(shù)據(jù)狀態(tài),避免狀態(tài)在父子組件的連鎖改動(子組件多的話改起來麻煩)及外部改動造成的不必要(難以排除)問題,所以所有的改動強(qiáng)橫通過一個方法(dispatch)修改。
實現(xiàn)步驟
//state(數(shù)據(jù))和action(控制修改)后的數(shù)據(jù) function reducer (state, action) { /!* 初始化 state 和 switch case *!/ } // 通過reducer獲取state // 執(zhí)行action // 監(jiān)聽數(shù)據(jù)變化 const store = createStore(reducer) // 監(jiān)聽數(shù)據(jù)變化重新渲染頁面 // 通過觀察者模式監(jiān)聽數(shù)據(jù)變化,避免沒有狀態(tài)改變的頻繁渲染 store.subscribe(() => renderApp(store.getState())) // 首次渲染頁面 renderApp(store.getState())
示例
const usersReducer = (state, action) => { if (!state) return []; switch (action.type) { case "ADD_USER": return [...state, action.user] case "DELETE_USER": return [...state.slice(0, action.index), ...state.slice(action.index + 1)] case "UPDATE_USER": let user = { ...state[action.index], ...action.user, } return [ ...state.slice(0, action.index), user, ...state.slice(action.index + 1), ] default: return state } } //state(數(shù)據(jù))和dispatch(控制修改)封裝起來 function createStore (reducer) { let state = null const listeners = [] const subscribe = (listener) => listeners.push(listener) const getState = () => state const dispatch = (action) => { state = reducer(state, action) // 覆蓋原對象 // console.log(listeners) listeners.forEach((listener) => { // console.log(listener) listener() }) } dispatch({}) // 初始化 state return { getState, dispatch, subscribe } } const store = createStore(usersReducer); console.log(store.getState()); //增 store.dispatch({ type: 'ADD_USER', user: { username: 'Lucy', age: 12, gender: 'female' } }); console.log(store.getState()); //改 store.dispatch({ type: 'UPDATE_USER', index: 0, user: { username: 'Tomy', age: 12, gender: 'male' } }); console.log(store.getState()); //刪 store.dispatch({ type: 'DELETE_USER', index: 0 // 刪除特定下標(biāo)用戶 }); console.log(store.getState());
感謝各位的閱讀!關(guān)于redux的核心是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)頁名稱:redux的核心是什么-創(chuàng)新互聯(lián)
標(biāo)題路徑:http://muchs.cn/article20/dpjeco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、云服務(wù)器、動態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容