国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

一個redux的簡單實現方法(代碼)

來源:懂視網 責編:小采 時間:2020-11-27 19:29:47
文檔

一個redux的簡單實現方法(代碼)

一個redux的簡單實現方法(代碼):本篇文章給大家帶來的內容是關于一個redux的簡單實現方法(代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。簡介: 手寫實現redux/react-redux基礎apiredux apicreateStore(reducer, [preloadedState], en
推薦度:
導讀一個redux的簡單實現方法(代碼):本篇文章給大家帶來的內容是關于一個redux的簡單實現方法(代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。簡介: 手寫實現redux/react-redux基礎apiredux apicreateStore(reducer, [preloadedState], en

本篇文章給大家帶來的內容是關于一個redux的簡單實現方法(代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

簡介: 手寫實現redux/react-redux基礎api

redux api

createStore(reducer, [preloadedState], enhancer)

創建一個 Redux store 來以存放應用中所有的 state
reducer (Function): 接收兩個參數,當前的 state 樹/要處理的 action,返回新的 state 樹
preloadedState: 初始時的 state
enhancer (Function): store creator 的高階函數,返回一個新的強化過的 store creator

Store 方法

getState() 返回應用當前的 state 樹
dispatch(action) 分發 action。這是觸發 state 變化的惟一途徑
subscribe(listener) 添加一個變化監聽器。每當 dispatch action 的時候就會執行,state 樹中的一部分可能已經變化
replaceReducer(nextReducer) 替換 store 當前用來計算 state 的 reducer

combineReducers(reducers)

把一個由多個不同 reducer 函數作為 value 的 object,合并成一個最終的 reducer 函數
import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers({
 todos,
 counter
})

applyMiddleware(...middleware)

使用包含自定義功能的 middleware 來擴展 Redux 是
...middleware (arguments): 遵循 Redux middleware API 的函數。每個 middleware 接受 Store 的 dispatch 和 getState 函數作為命名參數,并返回一個函數。該函數會被傳入 被稱為 next 的下一個 middleware 的 dispatch 方法,并返回一個接收 action 的新函數,這個函數可以直接調用 next(action),或者在其他需要的時刻調用,甚至根本不去調用它。調用鏈中最后一個 middleware 會接受真實的 store 的 dispatch 方法作為 next 參數,并借此結束調用鏈。所以,middleware 的函數簽名是 ({ getState, dispatch }) => next => action
import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import * as reducers from './reducers'

let reducer = combineReducers(reducers)
// applyMiddleware 為 createStore 注入了 middleware:
let store = createStore(reducer, applyMiddleware(thunk))

bindActionCreators(actionCreators, dispatch)

compose(...functions)

從右到左來組合多個函數。
當需要把多個 store 增強器 依次執行的時候,需要用到它
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import DevTools from './containers/DevTools'
import reducer from '../reducers'

const store = createStore(
 reducer,
 compose(
 applyMiddleware(thunk),
 DevTools.instrument()
 )
)

實現一個簡單的redux

使用redux實現

// import { createStore } from 'redux'
// 將redux文件替換成自己實現的redux文件
 import { createStore } from './self-redux.js'

// 這就是reducer處理函數,參數是狀態和新的action
function counter(state=0, action) {
 // let state = state||0
 switch (action.type) {
 case '加機關槍':
 return state + 1
 case '減機關槍':
 return state - 1
 default:
 return 10
 }
}
// 新建store
const store = createStore(counter)
const init = store.getState()
console.log(`一開始有機槍${init}把`)
function listener(){
 const current = store.getState()
 console.log(`現在有機槍${current}把`)
}
// 訂閱,每次state修改,都會執行listener
store.subscribe(listener)
// 提交狀態變更的申請
store.dispatch({ type: '加機關槍' })

實現createStore,store的相關方法

./self-redux.js

export function createStore(reducer) {
 let currentState = {}
 let currentListeners = []
 function getState() {
 return currentState
 }
 function subscribe(listeners) {
 currentListeners.push(listener)
 }
 function dispatch(action) {
 currentState = reducer(currentState, action)
 currentListeners.forEach(v => v())
 return action
 }
 dispatch({ type: '@rainie/init-store' })
 return {
 getState,
 subscribe,
 dispatch
 }
}

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

一個redux的簡單實現方法(代碼)

一個redux的簡單實現方法(代碼):本篇文章給大家帶來的內容是關于一個redux的簡單實現方法(代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。簡介: 手寫實現redux/react-redux基礎apiredux apicreateStore(reducer, [preloadedState], en
推薦度:
標簽: 一個 方法 簡單
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 亚洲视频网站在线观看 | 精品国产一区二区三区香蕉 | 欧美色图中文字幕 | 国产日本在线视频 | 欧美亚洲第一页 | 日韩αv| 欧美成人国产一区二区 | 久久精品a亚洲国产v高清不卡 | 国产传媒一区二区三区四区五区 | 精品一区二区三区亚洲 | 国产毛片高清 | 精品久久久久久久一区二区手机版 | 国产一区二区三区视频在线观看 | 国产成人在线看 | 欧美精品第一区 | 伊人情人综合成人久久网小说 | 欧美在线一二三区 | 91精品国产高清91久久久久久 | 国产日韩一区二区三区 | 亚洲精品免费观看 | 欧美国产一区二区三区 | 精品久久一区二区 | 日本一二区视频 | 亚洲国产精品一区二区久 | 亚洲天码中文字幕第一页 | 日韩在线一区二区 | 成人a免费视频播放 | 日韩a无v码在线播放免费 | 日韩欧美高清在线 | 亚洲欧美综合另类 | 国产视频高清在线观看 | 二区在线播放 | 欧美激情一区二区亚洲专区 | 免费看男女做好爽好硬视频 | 国产免费一区二区三区 | 国内一区二区三区精品视频 | 欧洲亚洲欧美国产日本高清 | 影音先锋中文字幕在线 | 欧美日韩亚洲区久久综合 | 毛片福利视频 | 欧美亚洲图区 |