React中 redux+react-redux的使用

1.安装

npm install react-redux -S

2.react-redux的使用，是结合redux使用的

react-redux提供了两个API，provider为后代组件提供store，connect为组件提供数据和变更方法

3.范例

在index.js中
import store from './store'
import {Provider} from 'react-redux'
ReactDOM.render(
    <Provider store={store}><App/></Provider>
    ,document.getElementById('root'))

// 在ReduxPage页面
import React,{Component} from 'react'
// connect是个高阶组件
import {connect} from 'react-redux'
export default connect(
//mapStateToProps把state映射到props
 state=>({num:state}),
//mapDispatchToProps把dispatch映射到props
//第二种方式配合
{
    add:()=>({type:'ADD'})
}
)(class ReduxPage extends Component {
    
    render(){
        const {num,dispatch}= this.props
        return (
            <div>
                <p>{num}</p>
                //第一种方式使用
                //<button onClick={()=>dispatch({type:'ADD'})}>增加</button>
                //第二种方式使用
                //<button onClick={add}>增加</button>
            </div>
        )
    }
})