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