什么是react-redux？

首先说一下redux和react-redux的区别：

redux是react中进行state状态管理的JS库，一般是管理多个组件中共享数据的，它并不是react的插件，是一个独立的库vue和angular等等一些框架都是可以使用的。

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。

使用方法

首先是先安装redux和安装react--redux依赖

安装指令：

npm install redux --save

npm install react-redux@5.1.2 --save

我在这使用的是5.1.2版本的react-redux。

安装完成之后和redux一样创建一个文件夹store创建index.js文件

import {createStore} from 'redux'
import reducer from "./reducer"
 
const store=createStore(reducer)
 
export default store

再在该文件夹下创建一个reducer.js文件 

var initState = {
    //状态
    title:"hello redux",
    cart:['react',"vue"]
}
 
function reducer(state=initState,action){
    switch(action.type){
        //方法
        case 'editTitle':
            return Object.assign({},state,{
                title:action.data
            })
        case "add":
            return Object.assign({},state,{
                cart:['123']
            })
        //默认返回值
        default:
        return state
    }
}
 
export default reducer

安装完成之后首先在index入口文件引入Provider

import { Provider } from 'react-redux';

 将App根组件包裹，使原来整个应用成为Provider的子组件

接收Redux的store作为props，通过context对象传递给子孙组件上的connect

index页面代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';

import { Provider } from 'react-redux';
import  store  from  "./store/index"

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
      <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')

 其次是在组件中引入模块的connect方法

import { connect } from 'react-redux'

然后在页面中创建一个实例进行接收数据：

const mapStateToProps = (state)=>{
    return{
        title:state.title,
        list:state.cart
    }
}
export default connect(mapStateToProps ,null)(Hello)

 最后默认导出connect方法这个方法下有两个参数第一个是接收数据，第二个传递数据、方法，Hello为组件名，如果只接收数据不传递数据的话后面的null不需要写，如果只传递数据和方法前面是需要写null的

创建传递数据和接收数据的实例：

const mapDispatchToProps = (dispatch,ownProps)=>{
  return{
    xg:()=>{
      dispatch({
        type:'editTitle',
        data:'2104AAAAAAAAAAA'
      })
    },
    add:()=>{
      dispatch({
        type:'add',
      })
    }
  }
}
export default connect(null,mapDispatchToProps)(App)

xg和add是方法名，dispatch内的type和是方法名称，data是传递的数据，reducer.js内代码和redux中的形式是一样，只是把方法写到了创建的新实例里面，没有接收的数据的实例的话，第一个参数就设置为null。