Redux基礎使用與入門

react-redux是redux的官方react繫結資料的庫。它能夠使你的react元件從store中讀取資料，運算元據並且向store分發actions以更新資料。

初體驗工作流：state狀態 -> 到檢視展示 -> 通過action操作reducer -> render操作倉庫資料

流程：

const reducer = (state, action) =>

建立倉庫 const store = redux.createstore(reducer)

獲取資料 store.getstate()

更新資料 store.dispatch（）

監控資料 store.subscribe

步驟2：redux devtool

// 1. 匯入redux庫（yarn add redux）

// 2. 匯入reducers
// 3. 建立倉庫store
// 5：yarn add redux-devtools-extension
// 6：修改store.js
import
from
'redux'
import
from
"redux-devtools-extension"
const initstate =,,
],}const
cartreducer
=(state = initstate, action)
=>
return state
}export
default
createstore
(cartreducer,
composewithdevtools()
)

import react from

'react'
;import reactdom from
'react-dom'
;// 狀態
import store from
'./store'
;// 元件
;reactdom.
render(/
>
, document.
getelementbyid
('root'))
;

// 元件

import cartindex from
'./pages/cart/index'
class
extends
component
/>
<
/div>);
}}export

//接受資料

constructor
(props)
}//更新資料
changenumfn
(option,index))}
//監聽更新資料
componentdidmount()
)})}

修改index.js

import

from
'react-redux'
>
>
<
/provider>

import

from
'react-redux'
//運算元據
changenumfn
(option, index)
else
}//獲取資料
render()
=this
.props
// 2. 渲染
return
(**）
}const
mapstatetoprops
= state =>
}const
mapdispatchtoprops
= dispatch =>
}export
default
connect
(mapstatetoprops, mapdispatchtoprops)
(index)

connect() 連線元件和store，容器屬性中使用 兩個引數：mapstatetoprops和mapdispatchtoprops，mapstatetoprops抽取資料（mapstate），mapdispatchtoprops分發actions

修改

// import  from 'redux' 

// combinereducers用來合併資料的
// import from 'redux' 
import
from
'redux'
// 改1
import thunk from
'redux-thunk'
// 改2
import
from
'redux-immutable'
;import
from
"redux-devtools-extension"
// export default createstore(cartreducer, composewithdevtools())
export
default
createstore
(combinereducers()
,composewithdevtools
((thunk)))
// 改3

//引入api中檔案

import
from
'../../../api/index.js'
;export
const
showstatus
=(params)
=>)}
})}}

redux-thunk 它唯一的作用就是讓 dispatch 中可以寫函式。能夠讓 store.dispatch()

既能接收函式做為引數，又能接收物件做為引數。

如果引數是物件的話，這個物件我們一般稱為 普通動作物件 （plain object）

如果引數是函式的話，這個函式我們一般稱為 非同步動作函式 (async action)

在store中建立index.js

// 匯入模組

import thunk from
'redux-thunk'
import
from
'redux'
import
from
"redux-devtools-extension"
// 匯入reducer
import reducers from
'./reducer'
;// 建立倉庫
const store =
createstore
(reducers,
composewithdevtools
((thunk)))
// 匯出倉庫
export
default store

// 匯入模組

import
from
'redux-immutable'
;// 匯入reducer
// import from '../pages/模組名/store';
import
from
'../pages/articles/store'
;// import from '../pages/login/store';
// 合併reducer
const reducers =
combinereducers()
// 匯出
export
default reducers

redux入門基礎

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

Redux的基礎使用入門（一）

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

redux基礎使用

基本概念 全域性狀態管理工具 redux 和 vuex 有何區別 redux 可以用在react vue angular中 vue with redux第三方包 npm上有使用方法 store reducer actionvuex 只能用在vue中 state getters mutations a...