React之购物车+动态获取参数+Hooks+Redux

1、redux-logger中间件

 

1️⃣：安装redux-logger依赖包

 yarn add redux-logger

2️⃣：在store的配置文件index中配置

 import {legacy_createStore as applyMiddleware,applyMiddleware} from 'redux'
 import counterReducer from './counterReducer'
 import {composeWithDevTools} from 'redux-devtools-extension'
 import logger from 'redux-logger'
 const store=createStore(counterReducer,composeWithDevTools(applyMiddleware(logger)))
 export default store

购物车

1️⃣：在actionType.js文件中编写代码

 export const GETSHOPCARLIST = 'getShopCarList'

2️⃣：在action文件下创建shopAction.js，action是一个对象，里面有个type属性，，主要是组件通过type来通知action需要更新数据。

 import * as actionTypes from './actionTypes'
 export const getShopCarList = (payload)=>({type:actionTypes.GETSHOPCARLIST,payload})

⚠️：payload为组件传的值

3️⃣：编写reducer，reduce响应action通知对象，经过处理，将通过return 将state发送给store

 import * as actionTypes from '../action/actionTypes'
 const shopCarReducer = (state={
     shopcarList:[]
 },action)=>{
     switch(action.type){
         case actionTypes.GETSHOPCARLIST:
             return {...state,shopcarList:action.payload}
         default:
             return state
     }
 }
 export default shopCarReducer

⚠️：...state解构，将action中的值赋给shopcarList

4️⃣：在组件中分别入Hooks组件：useSelector``useDispatch

useDispatch：调用useDispatch(),可以直接获取到dispatch方法，用来发送action

useSelector：参数为回调函数，在回调函数中可以获取到仓库的状态，然后通过return出数据，用一个变量来接，然后正常使用

 import React ,{useEffect,useMemo,useRef}from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 export default function ShopCar(){
     const dispatch = useDispatch()
     const list = useSelector((state)=>{
            return  state.shopCart.shopcarList
     })
   return (
     <div>
         <Table columns={column} dataSource={list} rowKey={'_id'} bordered={true} pagination={false}></Table>
         <div>总价:{totalPrice}</div>
     </div>
   )
 }

⚠️：通过useEffect，调用dispatch（getShopCarListAsync）获取购物车列表内容

5️⃣编写thunk的异步方法

• 安装redux-thunk依赖

 yarn add reduc-thunk

• 导入thunk

 import thunk from 'redux-thunk'

• 使用thunk

 const store=createStore(bigReducer,composeWithDevTools(applyMiddleware(thunk)))

redux的作用：让dispatch方法能够接收函数作为参数

6️⃣：编写redux-logger

 import logger from 'redux-logger'
 const store=createStore(counterReducer,composeWithDevTools(applyMiddleware(logger)))

redux-logger是为了打印日志，记录日志

7️⃣：在store入口文件引入shopReducer，并且将shopReducer放入createStore函数中.

 import {legacy_createStore as createStore,applyMiddleware,combineReducers} from 'redux'
 import shopCarReducer from './shopReduce/shopReduce'
 const bigReducer = combineReducers({
     shopCart:shopCarReducer
 })
 const store=createStore(bigReducer,composeWithDevTools(applyMiddleware(logger,thunk)))
 export default store

8️⃣：将store注册到全局，使用Redux的Provider，

 import { Provider } from 'react-redux'
 root.render(
     <Provider store={store}>
         <App></App>
     </Provider>
 )

Redux的Provider是React-Redux库提供的一个组件，它可以将Redux store传递给整个React应用程序。在使用React-Redux时，我们需要在应用程序的最顶层使用Provider组件，以便所有的子组件都能访问到Redux store中的状态数据。

9️⃣编写shopAsync异步文件

• 导入axios

 import axios from "axios"

• 导入shopAction文件

 import {getShopCarList} from '../action/shopAction'

• 编写thunk的异步方法

 export const getShopCarListAsync = async(dispatch,getState)=>{
         const {data:{data}} = await axios.get('http://www.zhaijizhe.cn:3001/shopcart/getShopcartData') 
         dispatch(getShopCarList(data))
 }

reudx-thunk的异步方法是异步回调函数

该回调函数参数说明如下

第1个参数：dispatch对象(是redux原生的dispatch对象)

第2个参数：getState():获取store仓库中的state的方法

⚠️： dispatch(getShopCarList(data))将获取到的列表数据传给action，action接收到值后通过shopReducer将值保存到仓库中

🔟：改变数量的方法

• 在shopAsync异步文件中编写改变数量的异步方法

export const changeCheckedAsync = (arg)=>{
  return async(dispatch,getState)=>{
         console.log('arg',arg);
         const result = await axios.get(`http://www.zhaijizhe.cn:3001/shopcart/checkProducts?_id=${arg}`)
         console.log(result.data.code);
         if(result.data.code==1){
             console.log(123);
         dispatch(getShopCarListAsync)
         }
     }
 }

组件dipatch发送action需要传值后，因为reudx-thunk接受值为dispatch,getState，但是调用接口需要传参，这时就需要将changeCheckedAsync改造为回调函数，这样子就能接受到组件传来的值，然后将异步请求函数return出去

11:编写勾选的异步代码:

 export const changeCheckedAsync = (arg)=>{
  return async(dispatch,getState)=>{
         console.log('arg',arg);
         const result = await axios.get(`http://www.zhaijizhe.cn:3001/shopcart/checkProducts?_id=${arg}`)
         console.log(result.data.code);
         if(result.data.code==1){
             console.log(123);
         dispatch(getShopCarListAsync)
         }
     }
 }

12:组件代码遇到的问题

1. 在使用antd-design中的Input组件，需要获取Input的值，通过useRef来获取值

  {
     title:'输入购买量',
     width:'150px',
      render:(text)=>{
       return <Input style={{width:'150px'}}  defaultValue={text.num} ref={inputnum}  onBlur={()=>{NumInput(text._id)}}></Input>
    }
 },

这里需要注意的是用的是onBlur事件

1. Table组件中获取该行的值，通过text参数，参数text拿到的是该行的对象

 title:'小计',
 align:'center',
 render:(text)=>{
   let data = text.price*text.num
    return data.toFixed(2)
 }