Redux的基礎使用入門(一)

2021-08-15 07:34:26 字數 1739 閱讀 1426

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...