React相关插件之Redux基本使用入门

原创
09/10 19:44
阅读数 79

引入和定义

首先,你需要创建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。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部