react-redux入门

1. react-redux 安装

npm install react-redux --save

2. 使⽤用react-redux

react-redux提供了了两个api

(1) provider 为后代组件提供store
(2) connect 为组件提供数据和变更更⽅方法

全局提供store，index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import store from './store/'
import { Provider } from 'react-redux'
ReactDom.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.querySelector('#root')
)

获取状态数据，ReactReduxPage.js

 
import React, { Component } from "react";
import { connect } from "react-redux";
class ReactReduxPage extends Component {
 render() {
   const { num, add, minus } = this.props;
   return (
     <div>
       <h1>ReactReduxPage</h1>
       <p>{num}</p>
       <button onClick={add}>add</button>
       <button onClick={minus}>minus</button>
     </div>
    ); 
 }
}
const mapStateToProps = state => {
 return {
   num: state,
 };
};
const mapDispatchToProps = {
 add: () => {
   return { type: "add" };
 },
 minus: () => {
   return { type: "minus" };
 }
};
export default connect( 
  //状态映射 mapStateToProps
 mapStateToProps,
 //派发事件映射
 mapDispatchToProps,
)(ReactReduxPage);