引入和定義
首先,你需要創建Store實例並暴露出來:
// stores/login.store.js
const loginInstance = (preState, action) => {
switch (action.type) {
// 修改狀態
case "changeLoginState":
preState.isLogin = action.loginFlag == 'YES' ? true : false
return preState
default:
return preState || { isLogin:false }
}
}
具體的時候可以更靈活,我們這裏只是按照個人開發習慣演示。
然後使用redux提供的方法創建即可:
// stores/index.js
import { legacy_createStore as createStore, combineReducers } from 'redux'
import loginInstance from './login.store'
let store = createStore(combineReducers({
loginInstance
}))
export default store
現在,就準備好可以使用了。
修改
如果我們需要觸發“changeLoginState”對 isLogin進行修改,可以這樣:
import store from './stores/index'
store.dispatch({
type: "changeLoginState",
loginFlag: "YES"
})
事實上,類似 login.store.js 的對象可以掛載多個,每次類似上面的行為,在所有的Store中都會觸發,具體的 Store根據自己的情況進行處理即可。
監聽&獲取
比如上面 isLogin 改變了,那麼頁面就應該進行相應的處理,所以需要在處理的地方進行監聽:
import store from './stores/index'
store.subscribe(() => {
console.log(store.getState()["loginInstance"]);
})
每次修改都會觸發 subscribe 回調,使用 getState 可以獲取所有定義的 Store 的state數據,上面我們打印了 loginInstance 的state。