redux基礎使用

基本概念

全域性狀態管理工具

redux 可以用在react、vue、angular中 (vue-with-redux第三方包（npm上有使用方法）)

store
reducer
action

vuex 只能用在vue中

state
getters
mutations
actions
module

1、安裝包，並且建立乙個store

npm i redux

2、建立reducer，並且整合到store中

其實reducer就是乙個純函式

3、通過 store 觸發 action

action 就是乙個物件，其中type屬性是必須的

4、我們可以通過redux的外掛程式檢視到目前倉庫中的值

index.jsx:

import react,  from 'react'

import store from './store/store' ------------------------------引入store
export default class index extends component 
}componentwillmount())})}
minus = () => ) ------------------------ store 觸發 action
}add = () => )
}render() 
-   +)}
}

store.js:

import  from 'redux'

// 匯入reducers
import reducers from './reducers'
// 建立倉庫, 並將reducers傳入進去, 第二個引數是便於在redux外掛程式中檢視store中的資料
const store = createstore(reducers, window.__redux_devtools_extension__ && window.__redux_devtools_extension__())
// 匯出
export default store

// 建立reducers, 純函式

function counter(state = 0,action)
}export default counter

Redux基礎使用與入門

react redux是redux的官方react繫結資料的庫。它能夠使你的react元件從store中讀取資料，運算元據並且向store分發actions以更新資料。初體驗工作流 state狀態 到檢視展示 通過action操作reducer render操作倉庫資料 流程 const reduc...

Redux的基礎使用入門（一）

redux 商店 store，存放state的容器 狀態 state，就是應用中需要使用的資料 動作 action，定義資料操作 通知 dispatch，傳送操作請求 函式 reducer，處理資料的業務邏輯 得到乙個資料容器 store let store redux.createstore fn...

redux入門基礎

1.redux 適用場景 多互動，多資料來源。2.從元件角度看，如果你的應用有以下場景，可以考慮redux 某個組建的狀態需要共享 某個狀態需要在任何地方都可以拿到 乙個元件需要改變全域性狀態 乙個元件需要改變另乙個元件的狀態 3.設計思想 web應用是乙個狀態機，檢視與狀態一一對應 所有物件都儲存...