react-redux的使用

react-redux允许我们在react中使用redux

react-redux提供了两个基本接口:
1．Provider 作用：给子组件暴露store (实现原理借助context来完成的)
2．Connect 作用：用来连接react组件和redux store，会返回一个已经与redux store连接后的组件（容器组件）

//1.安装react-redux
yarn add react-redux

//2.在index.js中通过Provide给子组件暴露store
import {Provider} from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

//1.安装react-redux
yarn add react-redux

//2.在index.js中通过Provide给子组件暴露store
import {Provider} from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)


//3.在要使用redux的组件中通过connect方法连接redux store

import React from 'react';
//connect是一个方法，该方法返回一个高阶组件，通过这个方法可以将我们写的组件和redux store连接起来，返回一个连接后的容器组件
import { connect } from 'react-redux';
//引入actions
import { add, minus, addAsync, chooseCity } from './actions'

function App(props) {
  //从props中获取redux的一些信息(state数据、action)
  const { count, city, add, minus, addAsync, chooseCity } = props;
  return (
    <div className="App">
      App组件

      <p>当前数量:{count}</p>
      <p>当前城市:{city}</p>

      <button onClick={() => add(3)}>点我加</button>
      <button onClick={() => minus()}>点我减</button>
      <button onClick={() => addAsync()}>点我异步加1</button>
      <button onClick={() => chooseCity("苏州")}>修改城市</button>
    </div>
  );
}

//！！！！！！mapStatetoProps返回值：可以将state中的数据映射到组件的props中
const mapStatetoProps = state => {
  return {
    count: state.count,
    city: state.city
  }
}

//！！！！！！mapDispatchToProps：可以将action映射到props中(此时的action已经具备了dispatch的功能，无需再通过store.dispatch()来触发)
const mapDispatchToProps = {
  add, minus, addAsync, chooseCity
}

//使用connect方法将props映射到App组件的props中，并且返回一个已经连接react-redux的容器组件
export default connect(mapStatetoProps, mapDispatchToProps)(App);