react总结之react-redux

react-redux的使用

在项目中使用redux如下:

1. 创建store

// 这个createrStore是react-redux用与创建store的方法
import {createStore} from 'redux'
// 引入后合并的 reducers
import reducers from './reduers'
// creatStore的第一个参数必须是一个reducers,如果有很多个reducers,那么需要在reducers中先使用combinReducer 合并之后再导出
export default createStore(reducers);
######  2. 引入组件Provider
import React, {Component} from 'react'
import App from './App'
import {render} from 'react-dom'
// Provider是react-redux提供的一个组件
import {Provider} from 'react-redux'
import store from './store'
render( 
  // 一般把Provider放在程序的最顶层,这个组件必须要有一个store属性,这个store就是使用createStore创建的store, 只要在最外层包裹Provider,那么所有的后代组件都可以使用
  // Redux.connect做连接
  
   
  ,
    document.getElementById('root')
  )

2. 创建reducer

// 为了避免actionsType重复,所以一般会把actionType放在一个文件里进行管理,这样也可以避免写错actionType
import actionType from '../actions/actionsType'
// 初始化数据
const initCount = [{
            id: 1,
            title: '苹果',
            price: 100,
            count: 10
        },{
            id: 2,
            title: '香蕉',
            price: 30,
            count: 20
        }];

// 创建reducer, 有两个参数,第一个参数是初始值,第二个参数是Actions  这个时候根据actions.type的不同, 做不同的处理,返回一个新的state,这里返回的类型要一样
export default(state = initCount, action) => {
    switch(action.type) {
        // 执行加法
        case actionType.CART_ADD:
            return state.map(x => {
                if (x.id === action.payload.id) {
                    x.count = x.count + 2;
                }
                return x;
            })
        break;
        // 执行减法
        case actionType.CART_MULIT:
            return state.map(x => {
                if (x.id === action.payload.id) {
                    x.count = x.count - 5;
                }
                return x;
            })
            break;
// 这里一定有default,这里对state不做处理
        default: 
        return state;
    }
}

3. 合并reducer

// 在实际的项目中,由于只有一个store,但是状态有很多,所以需要划分reducers,但是createStore又只接收一个reducers,所以我们需要将reducers进行合并,这时候就可以使用combineReducers
import {combineReducers} from 'redux'
// 引入reducer,如果有多个继续引入
import cart from './cart'
// 合并导出reducer
export default combineReducers({
    // 把多个reducer作为combineReducers的参数传入,然后在外部使用store.getState().cart就可以获取到cartRedcuer中state
    cart
})

4. 导入action和connect

import React, { Component } from "react";
// 导入actionsCreators
import {increment, decrement} from '../../actions/cart'
// connect执行之后是一个高阶组件
import {connect} from 'react-redux'
 class CartList extends Component {
  render() {
    return (
      

        
                {this.props.cartList.map(x => {
                   return(
                       
                   )
                })}
          

          

            

              
id
              
商品名称
              
价格
              
数量
              
操作
            
          
          

                           

                               {x.id}
                           
                           

                               {x.title}
                           
                           

                               {x.price}
                           
                           


                    {this.props.increment(x.id)}}>+

                       {x.count}this.props.decrement(x.id)}>-
                           
                       
        
      
    );
  }
}
// 这里的state实际就是store.getState()的值
const mapStateToProps = (state)=>{
  // render中使用this.props.cartList 来获取结果
  return {
    cartList: state.cart
  }
}
// connect 有4个参数,常用的是前面两个参数
// 第一参数是mapStateProps
// 第二参数是mapDispatchToProps,它的主要作用是,把action生成的方法注入到当前组件的props上,一般来说第二参数直接传递一个对象,这个对象就是actionCreators,只要传入了actionsCreators,
// 在组件内就可以使用this.props.actionsCreator来调用,这样的话,在调用之后,那个actionCreator就会自动 帮你把actions dispatch 出来
export default connect(mapStateToProps, {increment, decrement })(CartList)