react-redux
react-redux可以使redux的state成为组件的属性,dispatch的action也成为属性
provider
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
import App from './App'
const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)
connect
// 组件内部
import { connect } from 'react-redux'
import { increment, decrement } from './actions'
class Home extends React.Component{
// ...
}
export default connect(
state => ({data: state}),
{increment, decrement}
)(Home)
connect 有两个参数,第一个是一个函数,返回一个对象,函数的参数state就是store的状态state,
第二个参数是一个对象,属性为action生成函数
此时打印组件的属性即 console.log(this.props)
,可以看到
// 假设state为0, f的意思是其为一个函数
{ data: 0, incremet: f, decrement: f}
此时,获取状态就可以this.state.data
,
分发action就可以this.props.increment()
参考 react redux