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)