1. 程式人生 > >react-redux簡單實用

react-redux簡單實用

       首先了解一個過程,redux  肯定是通過在元件中出發一個方法(事件),我們可以實現一個簡單的例子播放和停止播放(寫到這今日心情不好,下次繼續)

redux需要安裝 以下依賴:
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
因為用到了es6/7的語法,需要安裝babel轉碼
cnpm install babel-plugin-import --save
cnpm install babel-plugin-transform-decorators-legacy --save //裝飾器模組
cnpm install babel-preset-es2015 --save
cnpm install babel-preset-react --save
cnpm install babel-preset-stage-2 --save
以及新增.babelrc檔案 (與package.json同級)
{
"presets": [ //presets 設定轉碼規則
"es2015",
"react",
"stage-2",
],
"plugins": ["transform-decorators-legacy"] //plugins 新增外掛
}


redux需要安裝 以下依賴:
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
@connect裝飾器報錯處理
因為用到了es6/7的語法,需要安裝babel轉碼
npm run eject //解除封裝
cnpm install babel-plugin-transform-decorators-legacy --save-dev
cnpm install @babel/plugin-proposal-decorators --save-dev
在package.json中新增外掛支援ES7
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},