詳細簡單的搭建react redux

最近完成vue的學習，轉過頭來學習react，按照vue的思想,先過幾遍官網文件，熟悉一下語法，然後就直奔路由，路由我是一路踩一坑，給我是弄的頭大的很，一看react官網什麼也沒有提，redux也是什麼也沒有，默默的流下新手不友好的眼淚。

進入正題，在學習react-redux之前，需要了解乙個redux是什麼。這個類似於vuex是乙個狀態管理用來跨元件通訊的倉庫。為啥說是倉庫了，是因為學完了它還要繼續學習react-redux，用來連線元件，使用倉庫裡面的資料提交分發。

在redux的時候匯入

import from 『redux』//用於建立倉庫

//import from 『redux』//這個用來管理多個reducer也就是多個提交判斷的資料集合

先建立createstore倉庫

然後建立combinereducers，

把多個reducer函式放入combinereducers

關於state資料

const initialstate = ,]}

關於reducer函式

constcartreducer= function(state=initialstate, action)

}return state;

}關於action提交

function addtocart(product, quantity, unitcost) //傳參

用了es6語法的比如product等於product：product}}

const allreducers =

let a=combinereducers(allreducers)//通過com管理

export const store=createstore(a)//倉庫

到這裡結束了 redux的配置

下面是結合上面redux 使用react-redux來管理資料

假如上面檔案是a.js

下面我們在index.js裡面寫

import react, from 『react』

import from 『element-react』;

import from 『react-redux』

class home extends component

add()

render()>修改)}

}function addtocart(product, quantity, unitcost) }}

const dis = dispatch => }}

const map=(state)=>

}export default connect(map,dis)(home)