正在更新 Redux 状态而不分派任何操作 [英] Redux state is being updated without dispatching any action

问题描述

我应该首先说这不是 这个问题，碰巧有相同的标题.

I should start off by saying this is not a duplicate of this question, which happened to have the same title.

我只是在这样的 componentDidMount 方法中从 props 获取数组的 customers 对象；

I'm simply getting a customers object of arrays from props inside a componentDidMount method like this;

  componentDidMount() {
      const { customers } = this.props
      const expiringCustomers = getExpiringCustomers(customers)
      console.log('Expiring customers ', expiringCustomers)
  }

在另一个文件中，我有一个 getExpiringCustomers 函数，它接受客户传递，并假设返回一个新修改的客户列表；

Inside another file, I have that getExpiringCustomers function which takes the customers passed and is suppose to return a newly modified list of customers like this;

function numbersOnly(value) {
    if(_.isString(value)) {
        value = Number(value.replace(/[^\d]/g, ''))
    }

    return value
}

function normalizeNumber(collection, field) {
    return collection.map(obj => {
        obj[field] = numbersOnly(obj[field])
        return obj
    })
}


export function getExpiringCustomers(customers) {
    const expiringCustomers = customers.filter(customer => {
        const daysLeft = Number(new Date(customer.endDate)) - _.now()
        if(daysLeft <= (dateInMonth * 3)) {
            return customer
        }
    })

    return normalizeNumber(expiringCustomers, 'rent')
}

我正在像这样将我的 react 组件与 redux 状态连接起来；

I'm connecting my react component with redux state like this;

const mapStateToProps = state => ({
    customers: state.customers.filter(customer => customer && !customer.deleted)
})

export default connect(mapStateToProps)(Accounting)

问题

在函数运行并记录结果后，客户在 redux 存储中的状态发生变化.

After the functions run and log results, customers' state is changed in redux store.

这非常令人困惑，因为 customers_edit 操作必须通过一些过程，但没有一个过程被调用/记录.

This is very confusing as customers_edit action has to pass through some procedures but none of them are called/logged.

受影响对象的快照:

Ps.数据只是样板.

Ps. The data is just boilerplate.

//- Focus on rent property

const customers = [
...,
{
      id: 'o91wukyfsq36qidkld02a0voo93rna5w',
      cardId: 'GD-1101010111',
      id_type: 'Driving License',
      firstName: 'Maalim',
      lastName: 'Guruguja',
      names: 'Maalim Guruguja',
      property: '5iaprurefg3v3uhad688mypo9kqf6xk3',
      rent: '250,000',
      email: '[e-mail]',
      phone: '239-288-3838-38',
      noticePeriod: '3',
      status: '2 months remain',
      startDate: '2018-07-09',
      endDate: '2018-08-17',
      createdAt: 1530623480772,
      updatedAt: 1531213159147
    },
    ...
]

//- After the functions run, log and edit customers array
const customers = [
...,
{
      id: 'o91wukyfsq36qidkld02a0voo93rna5w',
      cardId: 'GD-1101010111',
      id_type: 'Driving License',
      firstName: 'Maalim',
      lastName: 'Guruguja',
      names: 'Maalim Guruguja',
      property: '5iaprurefg3v3uhad688mypo9kqf6xk3',
      rent: 250000,
      email: '[e-mail]',
      phone: '239-288-3838-38',
      noticePeriod: '3',
      status: '2 months remain',
      startDate: '2018-07-09',
      endDate: '2018-08-17',
      createdAt: 1530623480772,
      updatedAt: 1531213159147
    },
    ...
]

从链接的问题(可能是重复的)回答的人说这是一些突变问题可能会导致这种情况.我不确定这是否适用于假定为只读的道具.

From the linked question (possible duplicate one) the guy who answered stated that it's some mutation issue that may cause this. I'm not sure if that applies on props that are suppose to be read-only.

如何阻止这些功能更新我的 redux store，请帮忙.

How can I stop these functions from updating my redux store, please help.

推荐答案

你改变了 normalizeNumber 中的对象，因为你使用的所有数组方法都不会克隆数组的对象.

You mutate the objects in normalizeNumber, since all the array methods you use don't clone the array's objects.

更改 normalizeNumber 回调以返回具有更新字段的新对象:

Change normalizeNumber callback to return a new object with the updated field:

function normalizeNumber(collection, field) {
    return collection.map(obj => ({
        ...obj,
        [field]: numbersOnly(obj[field])
    }))
}

这篇关于正在更新 Redux 状态而不分派任何操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！