React Native Redux 操作未更新存储数组答案

【问题标题】：React Native Redux action not updating store arrayReact Native Redux 操作未更新存储数组
【发布时间】：2021-01-19 07:31:06
【问题描述】：

我目前正在开发一个电子商务应用程序。我正在使用我之前在另一个项目中学到的方法，我使用一个按钮将某个菜单项标记为 redux 商店中的收藏项。

在这个项目中，我试图将产品 ID 添加到商店中的我的订单数组中。然后在我的购物车页面上显示具有相同 ID 的产品列表。查看日志上的输出时，它显示我的有效负载是正确的产品 ID，但下一个状态没有更新。

为了便于阅读，我只包含了相关代码。

orders.js

import * as ActionTypes from './ActionTypes';

export const orders = (state = [], action) => {
    switch (action.type) {
        case ActionTypes.ADD_ORDER:
            return state.concat(action.payload);

        default:
            return state;
    }
}

ActionTypes.js

export const POST_ORDER = 'POST_ORDER';
export const ADD_ORDER = 'ADD_ORDER';
export const REMOVE_ORDER = 'REMOVE_ORDER';

ActionCreators.js

export const postOrder = (productId) => (dispatch) => {

    setTimeout(() => {
        dispatch(addOrder(productId));
    }, 2000);
};

export const addOrder = (productId) => ({
    type: ActionTypes.ADD_ORDER,
    payload: productId
});

export const removeOrder = (productId) => ({
    type: ActionTypes.REMOVE_ORDER,
    payload: productId
});

CartComponent.js

import React, { Component } from 'react';
import { FlatList, View, Text, Alert } from 'react-native';
import { ListItem } from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../shared/baseUrl';
import { Loading } from './LoadingComponent';
import { removeOrder } from '../redux/ActionCreators';


const mapStateToProps = state => {
    return {
        products: state.products,
        orders: state.orders
    }
}

const mapDispatchToProps =  dispatch => ({
    removeOrder: (productId) => dispatch(removeOrder(productId))
});

class CartScreen extends Component {
    
    render() {

        const renderMenuItem = ({item, index}) => {
            return(
               <ListItem 
                    key={index}    
                    bottomDivider
                >
                   <Avatar source={{uri: baseUrl + item.image}}/>
                   <ListItem.Content>
                        <ListItem.Title>
                            {item.name}
                        </ListItem.Title>
                        <ListItem.Subtitle>
                            {item.description}
                        </ListItem.Subtitle>
                   </ListItem.Content>
                   
               </ListItem>
            );
        }
        if (this.props.products.isLoading) {
            return(
                <Loading />
            )
        }
        else if (this.props.products.errMess) {
            return(
                <Text>{this.props.products.errMess}</Text>
            )
        }
        else {
            return(
            <View>
                <Text>
                    Cart
                </Text>
                <FlatList
                    data={this.props.products.products.filter(product => this.props.orders.some(el => el === product.id))}
                    renderItem={renderMenuItem}
                    keyExtractor={item => item.id.toString()}
                />
            </View>

            );

        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(CartScreen);

【问题讨论】：

看不到你在哪里调用 Add_Order，也看不到你在哪里检索状态
假设 console.log 记录了正在调度的操作，您问题中的所有代码看起来都不错。也许检查你的根减速器并在那里登录，并确保你的订单减速器获得正确的状态切片。

标签： reactjs react-native redux react-redux

【解决方案1】：

感谢大家的贡献。

实际上，我在关闭调试器后尝试再次运行它，它工作正常。我检查了我的 git 历史记录，但我没有进行任何更改，所以不确定它现在是如何工作的。如下图所示，orders 数组现在由产品 ID 填充。

【讨论】：

我不知道使用 concat 会起作用，很高兴知道。

【解决方案2】：

Concat 在这种情况下不起作用，您需要使用spread 运算符，如下所示：


export const orders = (state = [], action) => {
    switch (action.type) {
        case ActionTypes.ADD_ORDER:
            return { ...state, nameOfTheAttributeYouWantToChangeInYourReducer: action.payload };

        default:
            return state;
    }
}

【讨论】：

有什么理由反对使用 concat？我现在让它与 concat 一起工作，它成功地将产品 ID 添加到数组中。