動態

詳情 返回 返回

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。

user avatar tianmiaogongzuoshi_5ca47d59bef41 頭像 grewer 頭像 freeman_tian 頭像 front_yue 頭像 dirackeeko 頭像 banana_god 頭像 Dream-new 頭像 shuirong1997 頭像 dunizb 頭像 febobo 頭像 Z-HarOld 頭像 bugDiDiDi 頭像
點贊 110 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.