react-redux简单使用

state 建立数据
reducer 根据数据建立事件对应处理 action type与payload
action 使用仓库的dispatch触发action 最终改变仓库数据
store createStore combineReducers 如果是多个仓库使用数据需要指明仓库
provide connect
provide将数据注入组件
connect在组件里创建action使用dispatch调用与对应的仓库reducer进行处理

<Provider store={
     store}>
    <Home/>
  </Provider>

connect(map,dis)(Home)

import {
     createStore} from 'redux'//用于创建仓库
import {
     combineReducers} from 'redux'//
const initialState = {
     //state数据
    cart: [
      {
     
        product: 'bread 700g',
        quantity: 2,
        unitCost: 90
      },
      {
     
        product: 'milk 500ml',
        quantity: 1,
        unitCost: 47
      }
    ]
  }
  const ADD_TO_CART = 'ADD_TO_CARTa';
  const cartReducer = function(state=initialState, action) {
     //数据与action提交类型
      switch(action.type){
     
        case 'ADD_TO_CART':
          // return {
     
          //   cart:state.cart.pop()
          // }
          return{
     
            cart:state.cart.push(action.payload)
          }
      }
      return state;
  }
   const allReducers = {
     //多个state数据集合
     products: cartReducer,
     product:cartReducer
   }
  
   
 let a=combineReducers(allReducers)//通过com管理
export  const store=createStore(a)//仓库
const e=store.getState();
 console.log( e.products)
 
 function addToCart(product, quantity, unitCost) {
     //actioc提交方法 具有属性与形参
  return {
     
    type: 'ADD_TO_CART',
    payload: {
      product, quantity, unitCost }
  }
}
 const sta=createStore(cartReducer)
sta.dispatch(addToCart('Coffee 500gm', 1, 250));

index.js执行目录

import React from 'react';
import ReactDOM from 'react-dom';
import {
     store} from './redux/redux'
import {
     Provider} from 'react-redux'
import Home from './Component/Home'
const App=(
  <Provider store={
     store}>
    <Home/>
  </Provider>
)
ReactDOM.render(
  App,
  document.getElementById('root')
);

home组件

 add(){
     
       this.props.onTodoClick()
        console.log(this.props.all)
    }
   
    render(){
     
        return(
            <div>
              123
              <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 {
       
        all:state.product.cart
    }
}
export default connect(map,dis)(Home)