簡易的redux?createStore手寫實現(xiàn)示例
1.首先創(chuàng)建一個store
根目錄創(chuàng)建一個store文件夾,下面創(chuàng)建一個index.js
import { createStore } from '../my-redux' // 書寫reducer函數(shù) function reducer(state = 0, action) { switch (action.type) { case "add": return state + 1; case "inc": return state - 1; default: return state; } } // 使用createStore(reducer)創(chuàng)建store對象并且導(dǎo)出 const state = createStore(reducer); export default state;
結(jié)合上面的代碼分析
- 創(chuàng)建store是redux庫的createStore函數(shù)接收一個reducer函數(shù)進行創(chuàng)建。
import { createStore } from '../my-redux'
- 先手寫一個簡單的reducer函數(shù)
// 書寫reducer函數(shù) 狀態(tài)值默認為0 function reducer(state = 0, action) { switch (action.type) { case "add": return state + 1; case "inc": return state - 1; default: return state; } }
- 將創(chuàng)建的store導(dǎo)出
// 使用createStore(reducer)創(chuàng)建store對象并且導(dǎo)出 const state = createStore(reducer); export default state;
2.其次創(chuàng)建一個my-redux
- 將所有的函數(shù)都導(dǎo)入index.js
import createStore from './createStore' export { createStore }
- 創(chuàng)建一個createStore.js
export default function createStore(reducer) { let currentState; // 當前state值 let currentListeners = []; // store訂閱要執(zhí)行的函數(shù)儲存數(shù)組 // 獲得當前state值 function getState() { return currentState; } // 更新state function dispatch(action) { // 傳入action 調(diào)用reducer更新state值 currentState = reducer(currentState, action) // 遍歷調(diào)用訂閱的函數(shù) currentListeners.forEach((listener) => listener()); } // 將訂閱事件儲存到currentListeners數(shù)組,并返回unsubscribe 函數(shù)來取消訂閱 function subscribe(listener) { currentListeners.push(listener); // unsubscribe return () => { const index = currentListeners.indexOf(listener); currentListeners.splice(index, 1); }; } dispatch({ type: "" }); // 自動dispatch一次,保證剛開始的currentState值等于state初始值 // 返回store對象 return { getState, dispatch, subscribe, } }
可以根據(jù)上面給出的代碼步步分析:
①明確createStore接收一個reducer函數(shù)作為參數(shù)。
②createStore函數(shù)返回的是一個store對象,store對象包含getState,dispatch,subscribe等方法。
- 逐步書寫store上的方法
書寫getState()方法
返回值:當前狀態(tài)值
// 獲得當前state值 function getState() { return currentState; }
書寫dispatch方法
接受參數(shù):action。
dispatch方法,做的事情就是:①調(diào)用reducer函數(shù)更新state。②調(diào)用store訂閱的事件函數(shù)。
currentState是當前狀態(tài)值,currentListeners是儲存訂閱事件函數(shù)的數(shù)組。
// 更新state function dispatch(action) { // 傳入action 調(diào)用reducer更新state值 currentState = reducer(currentState, action) // 遍歷調(diào)用訂閱的函數(shù) currentListeners.forEach((listener) => listener()); }
書寫subscribe方法
接受參數(shù):一個函數(shù) 返回值:一個函數(shù),用于取消訂閱unsubscribe
// 將訂閱事件儲存到currentListeners數(shù)組,并返回unsubscribe 函數(shù)來取消訂閱 function subscribe(listener) { currentListeners.push(listener); // unsubscribe return () => { const index = currentListeners.indexOf(listener); currentListeners.splice(index, 1); // 刪除函數(shù) }; }
返回store對象
// 返回store對象 return { getState, dispatch, subscribe, }
特別注意:
初始進入createStore函數(shù)的時候,需要通過dipatch方法傳入一個獨一無二的action(reducer函數(shù)默認返回state)來獲取初始的store賦值給currentStore。
可以結(jié)合下面reducer的default項和createStore方法調(diào)用的dispatch來理解
dispatch({ type: "" }); // 自動dispatch一次,保證剛開始的currentState值等于state初始值
// 書寫reducer函數(shù) function reducer(state = 0, action) { switch (action.type) { case "add": return state + 1; case "inc": return state - 1; default: return state; } }
這樣我們的createStore函數(shù)就已經(jīng)完成了。那接下來就是檢查我們寫的這玩意是否起作用沒有了。
3.創(chuàng)建一個Test組件進行檢測。
老規(guī)矩先拋全部代碼
import React, { Component } from 'react' import store from './store' // 引入store對象 export default class Test extends Component { // 組件掛載之后訂閱forceUpdate函數(shù),進行強制更新 componentDidMount() { this.unsubscribe = store.subscribe(() => { this.forceUpdate() }) } // 組件卸載后取消訂閱 componentWillUnmount() { this.unsubscribe() } // handleclick事件函數(shù) add = () => { store.dispatch({ type: 'add' }); console.log(store.getState()); } inc = () => { store.dispatch({ type: 'inc' }); console.log(store.getState()); } render() { return ( <div> {/* 獲取store狀態(tài)值 */} <div>{store.getState()}</div> <button onClick={this.add}>+</button> <button onClick={this.inc}>-</button> </div> ) } }
1. 將Test組件記得引入App根組件
import Test from './Test'; function App() { return ( <div className="App"> <Test /> </div> ); } export default App;
2. 將store引入Test組件
import React, { Component } from 'react' import store from './store' // 引入store對象
3. 創(chuàng)建一個類組件,并且使用store.getState()獲得狀態(tài)值
<div> {/* 獲取store狀態(tài)值 */} <div>{store.getState()}</div> <button onClick={this.add}>+</button> <button onClick={this.inc}>-</button> </div>
4. 書寫對應(yīng)的點擊按鈕
// handleclick事件函數(shù) add = () => { store.dispatch({ type: 'add' }); console.log(store.getState()); } inc = () => { store.dispatch({ type: 'inc' }); console.log(store.getState()); } <div> {/* 獲取store狀態(tài)值 */} <div>{store.getState()}</div> <button onClick={this.add}>+</button> <button onClick={this.inc}>-</button> </div>
這樣是不是就可以實現(xiàn)了呢?哈哈哈,傻瓜,你是不是猛點鼠標,數(shù)字還是0呢?
當然,這里我們只是更新了store,但是并沒有更新組件,狀態(tài)的改變可以導(dǎo)致組件更新,但是store又不是Test組件的狀態(tài)。
這里我們使用一個生命周期函數(shù)componentDidMount和store的訂閱函數(shù)進行更新組件的目的,使用componentWillUnmount和store的取消訂閱函數(shù)(訂閱函數(shù)的返回值)。
// 組件掛載之后訂閱forceUpdate函數(shù),進行強制更新 componentDidMount() { this.unsubscribe = store.subscribe(() => { this.forceUpdate() }) } // 組件卸載后取消訂閱 componentWillUnmount() { this.unsubscribe() }
好了。這里我們就真實實現(xiàn)了一個簡單的createStore函數(shù)來創(chuàng)建store。
以上就是簡易的redux createStore手寫實現(xiàn)示例的詳細內(nèi)容,更多關(guān)于手寫redux createStore的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
reset.css瀏覽器默認樣式表重置(user?agent?stylesheet)的示例代碼
這篇文章主要介紹了reset.css瀏覽器默認樣式表重置(user?agent?stylesheet),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計理念
這篇文章主要為大家介紹了React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計理念,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09