最近完成vue的学习，转过头来学习react，按照vue的思想,先过几遍官网文档，熟悉一下语法，然后就直奔路由，路由我是一路踩一坑，给我是弄的头大的很，一看react官网什么也没有提，redux也是什么也没有，默默的流下新手不友好的眼泪。
进入正题，在学习react-redux之前，需要了解一个redux是什么。这个类似于vuex是一个状态管理用来跨组件通信的仓库。为啥说是仓库了，是因为学完了它还要继续学习react-redux，用来连接组件，使用仓库里面的数据提交分发。
在redux的时候导入
import {createStore} from ‘redux’//用于创建仓库
//import {combineReducers} from ‘redux’//这个用来管理多个Reducer也就是多个提交判断的数据集合
先创建createStore仓库
然后创建combineReducers，
把多个Reducer函数放入combineReducers
关于state数据
const initialState = {//state数据
cart: [
{
product: ‘bread 700g’,
quantity: 2,
unitCost: 90
},
{
product: ‘milk 500ml’,
quantity: 1,
unitCost: 47
}
]
}
关于Reducer函数
const cartReducer = function(state=initialState, action) {//数据与action提交类型
switch(action.type){
case ‘ADD_TO_CART’:
return{
cart:state.cart.push(action.payload)//接收参数
}
}
return state;
}
关于action提交
function addToCart(product, quantity, unitCost) {//actioc提交方法 具有属性与形参
return {
type: ‘ADD_TO_CART’,//判断type类型
payload: { product, quantity, unitCost }//传参
用了es6语法的比如product等于product：product
}
}
const allReducers = {//多个state数据集合
products: cartReducer,
product:cartReducer
}
let a=combineReducers(allReducers)//通过com管理
export const store=createStore(a)//仓库
到这里结束了 redux的配置
下面是结合上面redux 使用react-redux来管理数据
假如上面文件是a.js
下面我们在index.js里面写
mport React from ‘react’;//react框架
import ReactDOM from ‘react-dom’;//创建dom节点
import {store} from ‘./a.js’
import {Provider} from ‘react-redux’//用来将store仓库注入组件
import {connect} from 'react-redux
import Home from ‘./Component/Home’
const App=(
< Provider store={store}>
< Home/>
</ Provider>
)
ReactDOM.render(
App,
document.getElementById(‘root’)
);
下面是Home组件里面的代码
import React,{Component} from ‘react’
import { Button,Layout } from ‘element-react’;
import {connect} from ‘react-redux’class Home extends Component
{
constructor(arg){
super(arg);
}
add(){
this.props.onTodoClick()
console.log(this.props.cart)
}
render(){
return(
< div>
< button onClick={this.but}>修改</ button>
</ div>
)
}
}
function addToCart(product, quantity, unitCost) {//actioc提交方法 具有属性与形参
return {
type: ‘ADD_TO_CART’,
payload: { product, quantity, unitCost }
}
}
const dis = dispatch => {
return {
onTodoClick: () => {
dispatch(addToCart(1,2,3))
}
}
}
const map=(state)=>{
return {
cart:state.product.cart
}
}
export default connect(map,dis)(Home)
