redux + react-redux realiza el proceso de compra

redux + react-redux realiza el proceso de compra

En el proceso de desarrollo de proyectos de comercio electrónico se involucrará el proceso de pedido y compra de bienes, el proceso aproximado es el siguiente:

1. El carrito de compras del menú muestra la cantidad de productos en tiempo real.
2. Agregar al carrito de compras en la página del producto
3. Ingrese a la página del carrito de compras para mostrar los productos agregados

El paso 3 anterior involucra tres componentes: un componente de menú, ensamblaje del producto, ensamblaje del carro, es decir los datos que necesitamos intercambio de datos entre estos tres componentes, como es el uso reaccionar desarrollo del proyecto, por lo que la introducción de la reduxrealización del proyecto Para el intercambio de datos entre múltiples componentes, dado que reacty reduxson dos productos independientes, no existe una conexión directa entre ellos, por lo que es necesario react-reduxasociar los reactcomponentes con los reduxdatos.

reduxNo hace falta decir que es una herramienta de gestión estatal que puede ayudarnos a lograr actualizaciones en la gestión de datos. react-reduxUso Contextde componentes de orden superior para lograr los problemas de intercambio de datos con el componente actualizado automáticamente.

Todo está ahí, solo el código

Uno, comparte datos redux

1. Primero use redux para crear datos

    // reducer/index.js
    const initState = {
        cartlist:[]
    }
    function reducer(state=initState,action){
        switch(action.type){
            // 添加商品
            case 'ADD_TO_CART':
                // 返回一个新的State，这个state会自动覆盖store中的旧数据
                return {
                    cartlist: [action.goods, ...state.cartlist]
                }
            // 删除商品
            case 'REMOVE_FROM_CART':
                return {
                    cartlist: state.cartlist.filter(item => item.goods_id != action.goods_id)
                }
            // 修改数量
            case 'CHANGE_QTY':
                return {
                    cartlist: state.cartlist.map(item => {
                        if (item.goods_id === action.goods_id) {
                            item.goods_qty = action.goods_qty
                        }
                        return item;
                    })
                }
            // 清空商品
            case 'CLEAR_CART':
                return {
                    cartlist: []
                }
            default:
                return state;
                
        }
    }
    export default reducer;
    // store/index.js
    import {createStore} from 'redux';
    import reducer from './reducer'
    const store = createStore(reducer);
    export default store;

1. Utilice react-redux para compartir datos

    import React from 'react'
    import ReactDOM from 'react-dom'
    import {Provider} from 'react-redux'
    import store from './store'
​
    ReactDOM.render(
        <Provider store={store}>
            <App/>
        </Provider>,
        document.getElementById('app')
    )

Dos, el componente de reacción recibe datos

1. El componente de menú recibe el número de artículos en el carrito de compras.

    const mapStateToProps = (state)=>{
        return {
            cartCount:state.cartlist.length
        }
    }
    @connect(mapStateToProps)
    class Menu extends React.Component {
        //...此处省略部分代码
    }

1. La página del producto recibe la lista de productos del carrito de compras y el método para agregarlos al carrito de compras.

    import {connect} from 'react-redux';
​
    @connect((state)=>({
        cartlist:state.cart.cartlist
    }),dispatch=>({
        add2cart(goods){
            dispatch({
                type:'ADD_TO_CART',
                goods
            })
        },
        changeQty(goods_id,goods_qty){
            dispatch({
                type:'CHANGE_QTY',
                goods_id,
                goods_qty
            })
        }
    }))
    class Goods extends Component{
        // ...此处省略一万行代码
    }

1. La página del carrito de compras muestra productos e implementa operaciones como eliminar, vaciar el carrito de compras y modificar la cantidad de productos.

    @connect(({cart:{cartlist}})=>({
        cartlist,
        totalPrice:cartlist.reduce((prev,item,idx,arr)=>prev+item.goods_price*item.goods_qty,0)
    }),(dispatch)=>{
        return {
            removeCart(goods_id){
                dispatch({
                    type:'REMOVE_FROM_CART',
                    goods_id
                })
            },
            clearCart(){
                dispatch({
                    type:'CLEAR_CART',
                })
            },
            changeQty(goods_id,goods_qty){
                dispatch({
                    type:'CHANGE_QTY',
                    goods_id,
                    goods_qty
                })
            }
        }
​
    })
    class Cart extends Component{
        // ...此处继续省略一万行代码
    }

Imagen de efecto

Los efectos del menú son los siguientes:

Los efectos de la página del producto son los siguientes:

​

 

Conclusión

redux + react-redux implementa el proceso completo de agregar un producto al carrito de compras. Los amigos cuidadosos descubrieron que redux y react-redux implementan funciones diferentes:

• reduxDefinir los datos iniciales statey proporcionar un statemétodo de modificación a través del reductor.
• react-reduxUse Context para compartir datos en redux ( <Provider/>) y use componentes de orden superior ( connect()) para pasar datos como accesorios a los componentes

El principio es realmente muy simple. El <Provider/>uso de componentes Contextpermite compartir datos entre componentes. No importa qué tan profundo sea el nivel del componente, los datos sobre redux se pueden obtener directamente, mientras que connect()los componentes de alto nivel pasan datos redux a los componentes de React a través de accesorios. La ventaja de los accesorios es que cuando se modifican los datos de redux (es decir, se modifican los accesorios), el componente se actualizará automáticamente.