狀態管理之 redux dva vuex

2021-10-01 19:13:15 字數 2664 閱讀 5448

日常積累,歡迎指正

redux 中

非同步處理:借助 redux-saga 等工具實現

container 元件示例

import

from

'react-redux'

import

from

'redux'

import

from

'../types/todolist'

import

from

'../actions/todolist'

inte***ce

iprops

const

mapstatetoprops

=(state: istorestate, ownprops: iprops)

=>

}const

mapdispatchtoprops

=(dispatch: dispatch, ownprops: iprops)

=>

, del:

(id: number)

=>

, donetowill:

(id: number)

=>

, add:

(text:string)

=>}}

const connector =

connect

(mapstatetoprops, mapdispatchtoprops)

export

default

connector

redux demo 的分支 20191226-up-async

dva= react-router + redux-saga

import

from

'../constants/todolist'

import

from

'../services/todolist'

export

const todolist =

'todolist'

export

default,,

,],/** @desc reducer */

reducers:]}

,done

(state, action)

return item

})},willdo

(state, action)

return item

})},del

(state, action)},

/** @desc saga */

effects:

] */

*addasync

(action, effects)/$

`,id: action.id,

text: result,

status: action.status

})}},

subscriptions:

};

dva 的原則是實現上盡量不建立新語法,而是用依賴庫本身的語法,所以與原生的 redux 使用起來非常的相似。

dva 中依舊是

需要注意的點就是 dva 中 action 的 type 均為 namespace/ 開頭 - namespace/reducers.attr 或 namespace/effects.attr

非同步處理:使用 model 的 effects ,這裡的 effects 的底層是 redux-saga

dva demo 的分支 02-demo

vuex 中乙個 store module 的結構與 dva 中 model 的結構比較相似

const modulea =

,/**

* 更改 vuex 的 store 中的狀態的唯一方法是提交 mutation

* 注意: mutations 只能是同步地更改狀態。

*/mutations:

,/**

* action 類似於 mutation,不同在於:

* action 提交的是 mutation,而不是直接變更狀態。

* action 可以包含任意非同步操作。

*/actions:

,/**

* 類似 store 的計算屬性

* 就像計算屬性一樣,getter 的返回值會根據它的依賴被快取起來,

* 且只有當它的依賴值發生了改變才會被重新計算。

*/getters:

}

對比 redux 需要注意的是:

vuex 的 action 與 redux 中的 action 也不一樣

vuex 中還有 mutation - 更改 vuex 的 store 中的狀態的唯一方法是提交 mutation。

vuex 對 state 操作的整個過程為:

dispatch 分發 action

action 提交 mutation

mutation 修改 state

state 修改觸發頁面展示更新

pagea }

money 增加

money 非同步增加

money 減少

vuex demo 中的 3-vuex

狀態管理之Cookie

一 cookie 工作流程 如果在使用者請求站點中不僅僅是乙個頁面,還有乙個包含過期時間的 cookie 使用者的瀏覽器在獲得頁面的同時還獲得了該 cookie 並將它儲存在使用者硬碟上的某個資料夾中。以後,如果該使用者再次請求該站點,瀏覽器便會在本地硬碟上查詢與之關聯 cookie 如果該 coo...

狀態管理之Session

一 sessionid 會話識別符號 預設情況下,sessionid 儲存在瀏覽未到期會話的 cookie 中。如果要儲存在 url將 sessionstate 節點的cookieless 設定為true 二 session 模式預設是 inproc iis 程序中 stateserver 狀態服務...

React 狀態管理之Redux

flux vuex vue react redux react state 狀態收集 更新內部state狀態,更新component 1.建立預設狀態 一般const or let乙個物件 const defaultstate 2.建立 reducer 純函式 函式必須有返回值 let reduce...