什么是react-redux?

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

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

React-ReduxRedux的官方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

安装完成之后首先在需要使用react-redux的页面引入这个模块中的connect方法

import { connect } from 'react-redux'

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

const mapDispatchToProps = (state)=>{
    return{
        title:state.title,
        list:state.cart
    }
}
export default connect(mapDispatchToProps,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。

上一篇:中国商用密码杂凑算法标准----SM3算法(数字签名)


下一篇:ReactHooks专题-useEffect