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做连接
  <Provider store={store}>
  <App> </App>
  </Provider>,
    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 (
      <div>
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
                {this.props.cartList.map(x => {
                   return(
                       <tr key = {x.id}>
                           <td>
                               {x.id}
                           </td>
                           <td>
                               {x.title}
                           </td>
                           <td>
                               {x.price}
                           </td>
                           <td>

                   <button onClick={() => {this.props.increment(x.id)}}>+</button>

                       <span>{x.count}</span><button onClick={() =>this.props.decrement(x.id)}>-</button>
                           </td>
                       </tr>
                   )
                })}
          </tbody>
        </table>
      </div>
    );
  }
}
// 这里的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)