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

引入和定义

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