react-redux

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容