react-redux
##1、理解es7的装饰器
资料: www.cnblogs.com/gavin-cn/p/…
2、使用react-redux
yarn add react-redux
关于使用
1、 需要一个 redux store
import { createStore, combineReducers } from 'redux'
const countReducer = function (state = 0, action) {
switch (action.type) {
case 'add':
state++
break
case 'sub':
state--
break
default:
return state
}
return state
}
const store = createStore(combineReducers({ count: countReducer }))
export default store
2、关于组件的编写
import React, { Component } from 'react'
import { connect } from 'react-redux'
// connect是个高阶组件
// 属性映射到 props
const mapStateToProps = (state) => {
return { count: state.count }
}
// 方法映射到props
let mapDispatchToProps = {
add: () => {
return { type: 'add' }
},
minus: () => {
return { type: 'sub' }
},
}
// 组件:
class ReactReduxPage extends Component {
render() {
const { count, add, minus, asyAdd } = this.props
return (
<div>
<h1>ReactReduxPage</h1>
<p>{count}</p>
<button onClick={add}>add</button>
<button onClick={minus}>minus</button>
</div>
)
}
}
// 通过装饰器或者 这样导入
export default connect(mapStateToProps, mapDispatchToProps)(ReactReduxPage)
3、除此之外还需要 提供store 让 connet组件可以取到
通过 react-redux 内置 的provider 提供 store
import React from 'react'
import { Provider } from 'react-redux'
import store from './store'
import RReduxpage from './index' // 就是上述的组件
export default function ReactReduxPage() {
return (
<div>
<Provider store={store}>
<RReduxpage />
</Provider>
</div>
)
}