美文网首页
react-redux

react-redux

作者: 书简_yu | 来源:发表于2019-05-04 17:32 被阅读0次

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

相关文章

网友评论

      本文标题:react-redux

      本文链接:https://www.haomeiwen.com/subject/vlhfoqtx.html