redux
三個基本原則:
唯一資料來源
保持狀態唯讀
資料改變只能通過純函式完成
應用的狀態資料應該只儲存在唯一的乙個store上。
就是說不能直接去修改狀態,要修改store狀態,必須要派發乙個action物件完成。
在redux中,每個reducer的函式簽名如下:
reducer(state,action)
第乙個引數是state當前的狀態,第二個引數action是接收到的action物件,因為reducer是乙個純函式,所以函式的返回結果必須完全有引數state和action決定,而且不產生任何***,也不修改action和state值。
在./src/actions.js中每個action建構函式會返回乙個action物件
import * as actiontypes from "./actiontypes.js"
export const increment = ()=>
}export const increment = ()=>
}
如上面的**,只是返回乙個物件,如何使用這個物件交給呼叫者。
store物件上的dispatch將action派發給store。
創造乙個 src/store.j s 檔案,這個檔案輸出全域性唯一的那個
store
import from "redux";
import reducer from "./reducer.js";
const initvalues=
const store = createstore(reducer,initvalues)
redux 提供createstore
這個函式,用來生成 store.
redux 庫提供的 create
store 函式,這個函式第
乙個引數
代表更新狀態的 reducer函式,第二個引數是狀態的初始值
createstore
函式接受兩個引數,返回新生成的 store 物件
src/reducer.js 中定義的 reducer 函式
import * as actiontypes from "./actiontypes.js";
export default (state,action) = > = action;
switch(action.type)
case actiontypes.decrement:
return
default:
return state
}}
counter元件,存在於src/view/counter.js中:
import react, from 'react';
import store from '../store.js';
import * as actions from '../actions.js';
const buttonstyle = ;
class counter extends component
getownstate() ;
} onincrement()
ondecrement()
onchange()
shouldcomponentupdate(nextprops, nextstate)
componentdidmount()
componentwillunmount()
render() = this.props;
return (
+- count:
);}}
counter.proptypes = ;
export default counter;
其中:store.getstate()能夠獲取store上存在的所有狀態(是store自有方法), redux學習心得
關於redux 之前是 就學習過的,今天看了一下阮一峰大神的部落格 想再整理總結一下 先寫流程 1,view 觸發方法方法 觸發了dispath 2,store.dispatch action 3,reducer 通過action計算出新的state 其中action一般是 這種規範 上面 中,ac...
學習心得(一)
1.利用好手頭上的資源而不要一味地屯資源,資源只有被利用才是有價值的 2.關於筆記 筆記只是幫助我們學習和精進的一種工具,它只是一種方法,一種手段,但是絕不是我們的目的,沒有必要強迫自己在做筆記時,把每乙個字都寫的端正和美觀,把筆記做得完美,不僅消耗我們的時間,而且很可能它浪費了我們原本可以用來做題...
學習心得 python學習心得
自從來了深圳工作以後,尤其是屢屢面試碰壁以後。發現其實自己的知識面很窄,做筆試題的時候絞盡腦汁還是漏洞百出,並不是不會做,而是出現一大堆不該有的失誤。每次被問道,對資料庫了解嗎?說一大堆看起來很高階的東西 好啊,那我們寫幾個sql語句吧。馬上完蛋了,沒了手冊關鍵字都記不起。了解哪幾種指令碼語言,sh...