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整合函式

import React from 'react'; import ReactDom from 'react-dom' import { createStore , applyMiddleware , compose } from 'redux' import thunk from 'redux-thunk' //引入非同步函式 import { Provider } from 'react-redux' import App from './App' import { counter } from './index.redux'
const store = createStore( counter, compose( applyMiddleware( thunk), window. devToolsExtension ? window. devToolsExtension() : f => f ))
ReactDom. render( ( < Provider store= { store } > < App /> </ Provider >), document. getElementById( 'root') )

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