react redux

在慕課網學習簡書的頁面設計，裏面就是用react、redux完成的這裏文檔結構值得學習，如今看一下文檔結構以下圖所示：

在這裏pubulic 文件夾存放假數據能夠設置接口獲取假數據具體代碼以下：

export const getList = () => {
 return (dispatch) => {
 axios.get('/api/headerList.json').then((res) => {
 const data = res.data;
 dispatch(changeList(data.data));
 }).catch(() => {
 console.log('error');
 })
 }
};
這裏在public文件夾中設置文件夾api，文件夾中是相應的json數據這樣就能夠獲取這裏面的json數據了

在簡書這個項目中redux設立一個總的reducer接收個部分的reducer,例如本實例的reducer代碼以下：

在這裏首先下載redux-immutable ，redux-immutable（redux也能提供，這裏使用的是不可變的對象）提供了combineReducers能夠將各部分的reducer組合在一塊兒：

const reducer = combineReducers({
      header: headerReducer,// 頭部
      home: homeReducer,//home頁
      detail: detailReducer,//詳情頁
      login: loginReducer //登陸頁
在總store 文件夾中咱們有index.js文件，它接收總的reducer,同時，組件接收ajax後臺數據都是用redux中間件redux-thunk，要想在redux-tools中看到redux的狀態能夠作以下的配置：

 

redux提供了createStore, compose, applyMiddleware,createStore 生成store,applyMiddleware接收中間件redux-thunk,這樣在redux-tools中就能夠看到store中的數據狀況

在頁面的每一個部分中都有store文件夾裏面有reducerjs文件夾，index.js文件夾以header文件夾所示（header是簡書頁面頭部的樣式）以下兩個圖所示：

這裏defaultState是不可變對象要將Immtable下載，將fromJS引入過來，fromJS能夠將普通對象變成immtable對象，這是後就能夠使用immtable的方法了

在這裏action.type之前是字符串如今能夠轉化成變量，這樣出錯了能夠有據可查，入下圖所示：

 

aciton是一個對象，能夠用一個方法返回該對象例以下面所示：

頁面react-redux下載後引入頁面中在頁面的主入口中引入，以下圖所示：

引入後react-redux有一個容器組件Provider，這樣將全局的store引入到主入口中，在Provider將屬性store = {store}(引入的store)這樣每一個頁面均可以使用store裏面的數據了，

 

 下圖是detail頁面代碼這裏引入connect是react-redux提供的用來接收參數mapStatetoProps和mapStateDistpacthToProps最後鏈接detail組件，這樣

這裏 export default connect(mapState, mapDispatch)(withRouter(Detail));這樣能夠經過this.props獲取store中的state定義的屬性和方法，至關於父組件傳遞給子組件的屬性和方法

 組件獲取後臺數據通常是在組件的componentMouted生命週期，可是太多邏輯在裏面就先的庸長，如今react-thunk就能夠解決這個問題，以下圖：

之前生成action返回的是一個對象，如今能夠返回一個函數，該函數參數是dispatch,取得的ajax發送到reducer中進行相應的處理