日常積累,歡迎指正
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...