首先说一下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
安装完成之后首先在需要使用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。