redux:商店:store,存放state的容器
狀態:state,就是應用中需要使用的資料
動作:action,定義資料操作
通知:dispatch,傳送操作請求
函式:reducer,處理資料的業務邏輯
// 得到乙個資料容器:store
let store=redux.createstore( fn );
console.dir(store);
redux.createstore()可以傳2個引數,乙個是reducer函式用來處理state,後期對 state 的操作都是通過 reducer 來實現的。另乙個是資料的初始值,存在store中。例:
var users = [,];
let store=redux.createstore( reducer,users )
console.dir(store)可以看到store下面有很多方法
這裡介紹前2個方法:
getstate():從store裡面拿到資料,用法:store.getstate()
dispatch():運算元據並通知reducer(後面詳細說用法)
如果需要修改資料,則需要通過 store物件的 dispatch 方法來實現dispatch接收乙個物件引數,該物件必須包含乙個type屬性,type就是操作型別說明
我們把dispatch傳入的引數稱為:action
store
.dispatch(
});
//建立reducer函式
商店:store,存放state的容器
狀態:state,就是應用中需要使用的資料
動作:action,定義資料操作
通知:dispatch,傳送操作請求
函式:reducer,處理資料的業務邏輯
首先建立乙個store用於存放資料 let store=redux.createstore( reducer,state )
使用者發出 action store.dispatch(action);
然後,store 自動呼叫 reducer,並且傳入兩個引數:當前 state 和收到的 action。 reducer 會返回新的 state 。let reducer = (state, action) =>
} 4.state 一旦有變化,store 就會呼叫監聽函式。設定監聽函式
store.subscribe(listener);
listener可以通過store.getstate()得到當前狀態。如果使用的是 react,這時可以觸發重新渲染 view。
function
listerner
()
Redux基礎使用與入門
react redux是redux的官方react繫結資料的庫。它能夠使你的react元件從store中讀取資料,運算元據並且向store分發actions以更新資料。初體驗工作流 state狀態 到檢視展示 通過action操作reducer render操作倉庫資料 流程 const reduc...
redux入門基礎
1.redux 適用場景 多互動,多資料來源。2.從元件角度看,如果你的應用有以下場景,可以考慮redux 某個組建的狀態需要共享 某個狀態需要在任何地方都可以拿到 乙個元件需要改變全域性狀態 乙個元件需要改變另乙個元件的狀態 3.設計思想 web應用是乙個狀態機,檢視與狀態一一對應 所有物件都儲存...
redux基礎使用
基本概念 全域性狀態管理工具 redux 和 vuex 有何區別 redux 可以用在react vue angular中 vue with redux第三方包 npm上有使用方法 store reducer actionvuex 只能用在vue中 state getters mutations a...