使用react-redux
阿新 • • 發佈:2019-01-08
1.安裝react-redux
npm install react-redux --save
2.在index.js中在react-redux中引入Provider模組
import { Provider } from 'react-redux'
//applyMiddleware來自redux可以包裝 store 的 dispatch
//thunk作用是使action建立函式可以返回一個function代替一個action物件
//compose整合函式
const store = createStore( counter, compose( applyMiddleware( thunk), window. devToolsExtension ? window. devToolsExtension() : f => f ))
ReactDom. render( ( <
3.在app.js中引入connect模組
必須引入
babel-plugin-transform-decorators-legacy且在package.json中加入 "plugins": [ "transform-decorators-legacy" ]後面才可能用@修飾符 import React from 'react' import { Button } from 'antd-mobile' import { connect} from 'react-redux' import { add, remove, addAsync} from './index.redux'
@ connect( state =>({ num : state}), { add , remove , addAsync} )
class App extends React. Component{ render () { return ( < div > < h1 >水果 {this. props. num } </ h1 > < Button type= "primary" onClick= {this. props. add } >點我 </ Button > < Button type= "primary" onClick= {this. props. addAsync } >點我 </ Button > </ div > ) } } export default App