資訊專欄INFORMATION COLUMN
摘要：案例代碼定義計算規(guī)則，即個商品價值戀人結算完成，當前購物車為空單身狗根據(jù)計算規(guī)則生成定義數(shù)據(jù)即變化之后的派發(fā)規(guī)則觸發(fā)數(shù)據(jù)變化上一篇開發(fā)教程八組件通信下一篇開發(fā)教程十結合
Readux基礎 什么是redux？
使用場景簡單點回答就是，一個管理數(shù)據(jù)的全局對象，但是它有單一狀態(tài)樹的概念，所謂的單一狀態(tài)樹，就是指“所有的 state都以一個對象樹的形式儲存在一個單一的 store 中。”
頁面中的所有狀態(tài)或者數(shù)據(jù)，都應該用這種狀態(tài)樹的形式來描述；頁面上的任何變化，都應該先去改變這個狀態(tài)樹，然后再通過某種方式實現(xiàn)到頁面上。
或者換句話說，我們要做的核心工作，就是用單個對象去描述頁面的狀態(tài)，然后通過改變這個對象來操控頁面。
無論是移動端還是 pc 端，當你使用 React 或者 vue 開發(fā)組件化的 SPA 程序時組件之間共享數(shù)據(jù)（狀態(tài)）共享本身就是一個問題，既然是共享的那么就沒有必要在每個組件中都重新獲取，因此每個系統(tǒng)都需要一個管理多組件使用的公共信息的功能，這就是 Redux 的作用。
核心概念Action：是把數(shù)據(jù)從應用傳到 store 的有效載荷，通俗一點就是描述一個動作
比如：
你的女朋友給你發(fā)了個消息，消息的內(nèi)容就是，"快去給我清空購物車"， 那么這個內(nèi)容在redux中就是action的意思
Reducer：Action 只是描述了有事情發(fā)生了這一事實，并沒有指明應用如何更新 state。而這正是 reducer 要做的事情。 一般稱其為規(guī)則
比如：
你女朋友已經(jīng)給你發(fā)完消息了，但是只是一個消息，你是執(zhí)行者，你是怎么執(zhí)行的他不關心，那么你執(zhí)行的這個過程就是reducer，為什么叫規(guī)則那，因為你執(zhí)行的這個過程本就是規(guī)則，你先得有錢，然后登錄他的帳號，然后結算
Store：Store 就是把 Reducer 和 action 聯(lián)系到一起的對象。
Store 有以下職責：
維持應用的 state；
提供 getState() 方法獲取 state；
提供 dispatch(action) 方法更新 state；
通過 subscribe(listener) 注冊監(jiān)聽器；
如果單純使用 Redux 僅僅安裝 Redux 即可，執(zhí)行npm install redux --save，不過在 React 中使用 Redux 肯定會用到 react-redux 這一工具，因此這里一起安裝完，執(zhí)行npm install react-redux --save。
案例代碼// 定義計算規(guī)則，即 reducer
function BoyFriend(state = {
cart: "10個商品價值100000000",
relationship: "戀人"
}, action) {
switch (action.type) {
case "JIEZHANG":
state.cart = "結算完成，當前購物車為空"
return state
case "FENSHOU":
state.relationship = "單身狗"
return state
default:
return state
}
}
// 根據(jù)計算規(guī)則生成 store
let store = createStore(BoyFriend)
// 定義數(shù)據(jù)（即 state）變化之后的派發(fā)規(guī)則
store.subscribe(() => {
console.log("current state", store.getState())
})
// 觸發(fā)數(shù)據(jù)變化
store.dispatch({ type: "JIEZHANG" })
store.dispatch({ type: "JIEZHANG" })
store.dispatch({ type: "FENSHOU" })
上一篇：react開發(fā)教程（八）React組件通信
下一篇：react開發(fā)教程（十）redux結合react
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90163.html
摘要：描述和之間沒有關系。但是還是比較適合和搭配的，因為允許你以的形式來描述界面，而非常擅長控制的變化。應用中應有且僅有一個。只需要在渲染根組件時使用即可。創(chuàng)建上一篇開發(fā)教程九基礎 描述 Redux 和 React 之間沒有關系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因為 React 允許你以 state 的形式...
摘要：描述和之間沒有關系。但是還是比較適合和搭配的，因為允許你以的形式來描述界面，而非常擅長控制的變化。應用中應有且僅有一個。只需要在渲染根組件時使用即可。創(chuàng)建上一篇開發(fā)教程九基礎 描述 Redux 和 React 之間沒有關系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因為 React 允許你以 state 的形式...
摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...
閱讀 2661·2021-09-23 11:21
閱讀 1923·2021-09-22 15:15
閱讀 1014·2021-09-10 11:27
閱讀 3470·2019-08-30 15:54
閱讀 690·2019-08-30 15:52
閱讀 1364·2019-08-30 15:44
閱讀 2379·2019-08-29 15:06
閱讀 3007·2019-08-28 18:21
