引入和定义
首先,你需要创建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。