redux + react-redux realiza processo de compra

redux + react-redux realiza processo de compra

No processo de desenvolvimento de projetos de e-commerce, estarão envolvidos o processo de pedido e compra de mercadorias, sendo o processo aproximado o seguinte:

1. O menu do carrinho de compras exibe a quantidade de mercadorias em tempo real
2. Adicionar ao carrinho de compras na página do produto
3. Entre na página do carrinho de compras para exibir os produtos adicionados

A etapa 3 acima envolve três componentes: um componente de menu, montagem de produto, montagem de carrinho, ou seja, os dados que precisamos, troca de dados entre esses três componentes, como é o uso e desenvolvimento do projeto, então a introdução da reduxrealização do projeto para a partilha de dados entre vários componentes, uma vez reacte reduxsão dois produtos independentes, não há nenhuma conexão direta entre eles, por isso é necessário react-reduxassociar os reactcomponentes com o reduxdados.

reduxNão é preciso dizer que é uma ferramenta de gerenciamento de estado que pode nos ajudar a obter atualizações no gerenciamento de dados. react-reduxUso Contextde componentes de ordem superior para atingir os problemas de compartilhamento de dados com o componente atualizado automaticamente.

Tudo está lá, apenas o código

Um, compartilhe dados redux

1. Primeiro use redux para criar dados

    // 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. Use react-redux para compartilhar dados

    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')
    )

Dois, o componente de reação recebe dados

1. O componente do menu recebe o número de itens no carrinho de compras

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

1. A página do produto recebe a lista de produtos do carrinho de compras e o método para adicionar ao carrinho 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. A página do carrinho de compras exibe produtos e implementa operações como excluir, esvaziar o carrinho de compras e modificar a quantidade de produtos

    @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{
        // ...此处继续省略一万行代码
    }

Imagem de efeito

Os efeitos do menu são os seguintes:

Os efeitos da página do produto são os seguintes:

​

 

Conclusão

redux + react-redux implementa o processo completo de adição de um produto ao carrinho de compras. Os amigos cuidadosos descobriram que redux e react-redux implementam funções diferentes:

• reduxDefina os dados iniciais statee forneça um statemétodo de modificação por meio do redutor
• react-reduxUse Context para compartilhar dados em redux ( <Provider/>), e use componentes de ordem superior ( connect()) para passar dados como acessórios para componentes

O princípio é realmente muito simples. O <Provider/>uso de componentes Contextrealiza o compartilhamento de dados entre os componentes. Não importa a profundidade do nível do componente, os dados no redux podem ser obtidos diretamente, enquanto connect()os componentes de alto nível passam os dados redux para os componentes do React por meio de props. A vantagem dos adereços é que quando os dados redux são modificados (ou seja, os adereços são modificados), o componente será atualizado automaticamente.