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(
    
        
    ,
    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)