什么是Redux

Redux 是數(shù)據(jù)管理工具，Redux 能讓Javascript的狀態(tài)管理變得更加可預(yù)期

項目中Redux使用的技術(shù)，主要：

image.png

項目使用 create-react-app 創(chuàng)建開發(fā)環(huán)境

環(huán)境中包含一套 webpack 最佳配置，提供了 react 的 jsx 語法和 es6 語法的編譯能力。

程序的入口 src/index.js 文件。導(dǎo)入 React ，ReactDOM 負責(zé)把組件渲染到瀏覽器中, ReactDOM.render , 把 App 組件掛載到 id 為 root 的頁面元素上，這個元素在 public/index.html 中。

命令行中執(zhí)行

yarn start

Redux 的使用

一切數(shù)據(jù)都要保存的 Store 之中，組件自己不保留 state 數(shù)據(jù)

• redux 并不是 react 的一部分

npm i --save redux

首先創(chuàng)建 src/store/index.js 文件。首先導(dǎo)入 createStore 接口，顧名思義，這個就是用來創(chuàng)建 store 的。然后導(dǎo)入 reducer ，reducer 是一個用來修改 store 的函數(shù)，也是 redux 的核心組成部分之一。定義 store 常量來存放 store ，createStore 接口中傳入 rootReducer 。最后把 store 默認導(dǎo)出。

• store 有了后，數(shù)據(jù)要放到Reducer中

創(chuàng)建 reducers/index.js 文件。。。。。

• 用 redux-logger 監(jiān)控 action

為了輔助開發(fā)，先安裝 redux-logger 。
npm i redux-logger
log 的意思是記錄。

image.png

• 如何修改狀態(tài)？ 使用action

通過store中dispatch 的 action ，就不僅僅有 type 了，還有攜帶的數(shù)據(jù)

image.png

• action 發(fā)出之后，誰會接收它？ 使用Reducer，state改變后

image.png

• 讀取store中改變的數(shù)據(jù)

一種 是store.getState() 的形式來讀取數(shù)據(jù)

另外一種 是

image.png