React-Redux |Список продуктов |Добавить / удалить с BindActionCreator - PullRequest
Новая
       9

React-Redux |Список продуктов |Добавить / удалить с BindActionCreator

0 голосов
/ 10 февраля 2019

Я пытаюсь создать список продуктов в React, где я могу добавлять и удалять продукты.

Я начал изучать, как я могу это сделать, используя redux framework./ платформа и реагировать родной

У меня уже есть функция productList контейнер, product компонент и cartList, cartProduct компонент.

Мои проблемы:

Продукты: я могу только добавлять продукты, а не удалять

Корзина: Наоборот + корзина не обновляетсястатус товаров в корзине.

Я добавил bindActionCreator, но пока не знаю, как применить его к списку товаров.

Что я ожидаю? Я пытаюсь добавлять и удалять продукты из хранилища реакции в том же контейнере / компоненте.

Как я могу это сделать?Мой подход правильный или я совершенно не прав?

Спасибо заранее.

ProductActionCreators 

export const ADD_TO_CART = 'ADD_TO_CART'
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'

export function addItemToCart(row) {
    return {
        type:'ADD_TO_CART', 
        payload: row, qty
    }
  }

  export function removeTodo(row) {
    return {
        type:'REMOVE_FROM_CART' , 
        payload: row, qty
    }
  }

ProductList (упрощенный) 

     import React from 'react';
     import { Component } from 'react';
      import { 
        View,  
        StyleSheet, 
        Text
     } from 'react-native';
     import Products from '../components/Products';
     import { bindActionCreators} from 'redux';
     import { connect } from 'react-redux';

     import * as ProductActionCreators from '../actions/ProductActionCreators'

     export  class ProductList extends React.Component {
        static navigationOptions = {
            header: null,
        };
        constructor(props) {
            super(props);
            const { rows } = this.props.navigation.state.params;
            const arrays = Object.values( {rows});
            this.state = {
                arrays,
                filteredProducts: arrays,
            };
            const { dispatch } = props
            this.boundActionCreators = bindActionCreators(ProductActionCreators, dispatch)
            console.log(this.boundActionCreators)
        }



          render() {
            return (
                <View style={styles.container} >
                <Text style={styles.title} >
                    {this.state.arrays[0].name}
                </Text>
                    <Products products={this.state.arrays[0].data} onPress=
//Trying to change this to multiple actions
{this.props.addItemToCart}/>    
                </View>
            )
          }
        }

    const qty = 0;

    const mapDispatchToProps = (dispatch) =>{
        //need to add BindActionCreator
        return{
            addItemToCart:(row) => dispatch({
                type:'ADD_TO_CART', payload: row, qty

            }),
            removeItem:(product) => dispatch ({
                type:'REMOVE_FROM_CART' , payload: product, qty
            })  
        }

    }

    export default connect(null, mapDispatchToProps) (ProductList);

Продукт (упрощенный) 

import React, { Component } from "react";
import {
    View,
    Text,
    TouchableOpacity,
    TextInput,
    FlatList,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

class Products extends Component {
    constructor(props) {
        super(props);
        const { products } = this.props;
        this.state = {
            products, 
            filteredProducts: products,
        };
    }
    renderProducts = (products) => {
            return (
                <View key={products.index}>
                    <View> 
                        <Icon name={products.item.icon} color="#DD016B" size={25} />
                    </View>
                    <View>
                        <Text style={styles.name}>
                            {products.item.name}
                        </Text>
                        <Text>
                        € {products.item.price}
                        </Text>
                    </View>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity onPress={() => this.props.onPress(products.item)} > 
                            <Icon name="ios-add" color="white" size={25} />
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => this.props.onPress(products.item)} > 
                            <Icon name="ios-remove" color="white" size={25} />
                        </TouchableOpacity>

                    </View>
                </View>
            )
    }

    render() {
        return (
            <View>
                <FlatList
                style={styles.listContainer}
                data={this.state.filteredProducts}
                renderItem={this.renderProducts}
                keyExtractor={(item, index) => index.toString()}
                />
            </View>
        );
    }
}

export default Products;

Редукторы / CartItems 

const cartItems = (state = [], action) => {
    switch (action.type)
    {
        case 'ADD_TO_CART':
            if (state.some(cartItem => cartItem.id === action.payload.id)) {
                // increase qty if item already exists in cart
                return state.map(cartItem => (
                    cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty + 1 } : cartItem

                    ));            
            }
            return [...state, { ...action.payload, qty: 1 }]; 
            // else add the new item to cart            
        case 'REMOVE_FROM_CART':
            return state
                .map(cartItem => (cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty - 1 } : cartItem))
                .filter(cartItem => cartItem.qty > 0);
    }
    return state
} 
export default cartItems

Магазин / Индекс 

import {createStore} from 'redux';
import cartItems from '../reducers/carItems';

export default store = createStore(cartItems)

Приложениеструктура (упрощенная) 

Main folder
        ↳
          Containers(folder)
            ↳
             ProductsList.js
             CartList.js

          Components(folder)
            ↳
             Product.js
             cartProduct.js

          Reducers(folder)
            ↳
             carItems.js

          Actions(folder)
            ↳ 
             ProductActionCreators.js

          Navigation(folder)
            ↳
             AppNavigator,js
             MainTabNavigator.js

          Assets(folder for images etc.)
          Store(folder)
            ↳
             index.js
          App.JS
          Data.JS (using static JSON file for this development phase)

Ответы [ 3 ]

0 голосов
/ 12 февраля 2019

В вашем ProductList я бы подошел к привязке действия следующим образом: 

const mapDispatchToProps = (dispatch) =>{
    return bindActionCreators({
        addItemToCart: (row, qty) => dispatch({
            type:'ADD_TO_CART', payload: {row, qty}
        }),
        removeItem: (product, qty) => dispatch({
            type:'REMOVE_FROM_CART' , payload: {product, qty}
        })  
    })
}

export default connect(null, mapDispatchToProps)(ProductList);

Удалите привязку действия из конструктора компонента, так как в этом нет необходимости.

Возможно, вы захотитеразделить код на подход Container / Component / HOC, так как я считаю, что код намного проще для чтения.Поскольку вы определили свои действия в отдельном файле, я бы также импортировал их, а не переназначал их.

Если вы последуете этому совету, вы получите следующее:

container.js 

import { bindActionCreators } from 'redux';
import ProductList from './product-list';

// Actions
import { addItemToCart, removeItem } from './actions';

function mapStateToProps(state) {
    return {}
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        addItemToCart,
        removeItem,
    })
}

export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

product-list.js 

import React from 'react';
import { View, Text } from 'react-native';
import Products from '../components/Products';

export  class ProductList extends React.Component {
    static navigationOptions = {
        header: null,
    };
    constructor(props) {
        super(props);
        const { rows } = this.props.navigation.state.params;
        const arrays = Object.values( {rows});
        this.state = {
            arrays,
            filteredProducts: arrays,
        };

        this.handleProductPress = this.handleProductPress.bind(this);
    }

    handleProductPress(e) {
        e.preventDefault();
        // This is pseudo code...
        this.props.addItemToCart(e.target.value, 1);
        return;
    } 

    render() {
        return (
            <View style={styles.container} >
                <Text style={styles.title} >
                    {this.state.arrays[0].name}
                </Text>
                <Products products={this.state.arrays[0].data} onPress={this.handleProductPress} />
           </View>
        ) 
    }
}

export default ProductList;

Поиграйте с этим и посмотрите, как вы ладите.

0 голосов
/ 12 февраля 2019

У вас есть два разных действия, addItemToCart, removeItem, которые вы определяете в mapDispatchToProps.Теперь, когда вы указываете аргумент mapDispatchToProps для подключения, метод отправки недоступен в качестве реквизита для подключенного компонента, вместо этого метод, возвращаемый mapDispatchToProps, доступен только

Во-вторых, Вы не можетеНеобходимо использовать bindActionCreators и определенно не в компоненте.MapDispatchToProps может быть просто объектом, и connect будет использовать внутреннюю диспетчеризацию.

Третий , вам необходимо передать действия добавления и удаления как дочернему компоненту.

Четвертый Вы можете передать несколько действий компоненту Product просто как prop

Ваш код будет выглядеть как

ProductActionCreators.js 

export const ADD_TO_CART = 'ADD_TO_CART'
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'

export function addItemToCart(row) {
    return {
        type:'ADD_TO_CART', 
        payload: row
    }
  }

  export function removeItem(item) {
    return {
        type:'REMOVE_FROM_CART' , 
        payload: item
    }
  }

ProductList 

  import React from 'react';
  import { Component } from 'react';
  import { 
    View,  
    StyleSheet, 
    Text
 } from 'react-native';
 import Products from '../components/Products';
 import { connect } from 'react-redux';

 import { addItemToCart, removeItem } from '../actions/ProductActionCreators';

 export  class ProductList extends React.Component {
    static navigationOptions = {
        header: null,
    };
    constructor(props) {
        super(props);
        const { rows } = this.props.navigation.state.params;
        const arrays = Object.values( {rows});
        this.state = {
            arrays,
            filteredProducts: arrays,
        };
    }



      render() {
        return (
            <View style={styles.container} >
            <Text style={styles.title} >
                {this.state.arrays[0].name}
            </Text>
                <Products products={this.state.arrays[0].data} addItemToCart={this.props.addItemToCart} removeItem={this.props.removeItem}/>    
            </View>
        )
      }
    }


const mapDispatchToProps =  {
     addItemToCart,
     removeItem
}

export default connect(null, mapDispatchToProps) (ProductList);

Product 

import React, { Component } from "react";
import {
    View,
    Text,
    TouchableOpacity,
    TextInput,
    FlatList,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

class Products extends Component {
    constructor(props) {
        super(props);
        const { products } = this.props;
        this.state = {
            products, 
            filteredProducts: products,
        };
    }
    renderProducts = (products) => {
            return (
                <View key={products.index}>
                    <View> 
                        <Icon name={products.item.icon} color="#DD016B" size={25} />
                    </View>
                    <View>
                        <Text style={styles.name}>
                            {products.item.name}
                        </Text>
                        <Text>
                        € {products.item.price}
                        </Text>
                    </View>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity onPress={() => this.props.addItemToCart(products.item)} > 
                            <Icon name="ios-add" color="white" size={25} />
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => this.props.removeItem(products.item)} > 
                            <Icon name="ios-remove" color="white" size={25} />
                        </TouchableOpacity>

                    </View>
                </View>
            )
    }

    render() {
        return (
            <View>
                <FlatList
                style={styles.listContainer}
                data={this.state.filteredProducts}
                renderItem={this.renderProducts}
                keyExtractor={(item, index) => index.toString()}
                />
            </View>
        );
    }
}

export default Products;
0 голосов
/ 12 февраля 2019

Код выглядит нормально по большей части.

Часть ответного соединения в ProductList выглядит не так.Кол-во всегда равно 0. Это должно быть 1.

Кроме того, должен присутствовать mapStateToProps для получения товаров из корзины.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...