yarn add redux
yarn add react-redux
1.容器元件（container components）
2.展示元件（presentational components）
在我們的專案中，一般來說，會編寫很多展示元件，少量的容器元件來包裹這些展示元件。
接下來寫乙個簡單的計數器應用，先來劃分容器元件和展示元件。
計數器有三個按鈕，加、減、重置；乙個展示區。
由於按鈕既要觸發action，又要負責展示，所以需要做成混合元件。
先來編寫展示元件，就是顯示一下當前計數。
import react from 'react';
const counter = () => (
當前計數為：count
)export default counter;
在react-redux中實現了connect方法，它生成乙個高階元件，就是前面提到的容器元件。這個方法做了效能優化避免不必要的重複渲染，建議使用該方法。
connect([mapstatetoprops], [mapdispatchtoprops], [mergeprops], [options])const mapstatetoprops = () => ;
// 或者
const mapstatetoprops2 = (state) =>
import from 'react-redux';
const connectcounter = connect(
mapstatetoprops
)(counter);
export default connectcounter;
由於，需要dispatch，所以需要給connect傳入第二個引數。
mapdispatchtoprops可以是object或者function。用來將dispatch對映到props上。
const mapdispatchtoprops = dispatch => )
}}// 或者結合上篇提到的bindactioncreators合成乙個物件
function plus() ;
}function minus() ;
}const mapdispatchtoprops2 = dispatch => , dispatch)
}
import react from 'react';
let button = () =>
)};button = connect(()=>{}, mapdispatchtoprops2)(button);
export default button;
感謝閱讀。
react系列教程
這個系列將從基礎語法講起，把react全家桶都講到，然後到具體的使用，最後完成後，會寫乙個完整的demo。目前已經完成的內容 react系列 零 安裝 react系列 一 jsx語法 元件概念 生命週期介紹 react系列 二 高階元件 hoc react系列 三 元件間通訊 react系列 四 r...
react入門系列之redux saga中介軟體
store中index檔案 import creatsagamiddleware from redux saga import todosagas from saga import todolistreducer from reducer 引入圖書列表 const composeenhancers ...
React 深入系列7 React 常用模式
react 深入系列，深入講解了react中的重點概念 特性和模式等，旨在幫助大家加深對react的理解，以及在專案中更加靈活地使用react。1.受控元件 react 元件的資料流是由state和props驅動的，但對於input textarea select等表單元素，因為可以直接接收使用者在...