react-redux概述

React-redux和redux的关系

react和redux是没有关系的

refux和react这类库搭配起来更好用

react-redux是react官方推出的 用于配合React绑定库

React-redux能够使你的React组件从React Store中很方便的读取数据，并且向store中分发actions 以此来更新数据

React-Redux中两个重要成员

• Provider 这个组件 能够使整个app都能获取到store中的数据
• connect 这个方法 能够使组件跟store来进行关联

1. Provider

   • Provider包裹在根组件的最外层，使所有的组件都可以拿到State

   • Provider接收store作为props，然后通过context往下传递，这样react中任何组件都可以通过context获取store

     

2. connect

   • Provider内部组件如果想要使用到state中的数据，就必须要connect进行一层包裹封装，其实要被connect进行加强
   • connect就是方便组件能够获取到store中的state

• 引入Provider组件

  • 在app.js中导入Provider组件

    import {Provider} from 'react-redux'
    

  • 利用Provider组件将整个结构进行包裹，并传递store

    function App () {
      return (<Provider store={store}>...</Provider>)}
    

• connect使用

  • 导入connect方法

    import {connect} from 'react-redux'
    

  • 调用connect方法

    connect(...)(Component)
    

  • connect方法会有一个返回值，返回的就是加强的组件

  • connect参数说明：

• 利用connect方法让组件与store进行关联