Изменить состояние массива без изменения всего состояния (REACT/REDUX)

Question

У меня есть список вещей для покупки (для небольшой игры, которую я делаю с React), который является массивом. Он находится в состоянии, называемом «Рынок». И у меня есть другой, где я хочу рандомизировать все значение и запасать их в другом состоянии.

Это мой список Рынка:

let marketList = [ 
    {"name": 'product name', "qty": 0, "minPrice": 10, "maxPrice": 100, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 30, "maxPrice": 200, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 100, "maxPrice": 1500, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 200, "maxPrice": 4000, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 50, "maxPrice": 6000, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 1, "maxPrice": 400, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 60, "maxPrice": 3450, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 2, "maxPrice": 120, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 8, "maxPrice": 600, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 120, "maxPrice": 3200, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 35, "maxPrice": 100, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 300, "maxPrice": 12000, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}, 
    {"name": 'product name', "qty": 0, "minPrice": 1, "maxPrice": 80, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false} 
]; 

Я хочу рандомизации всех значений в нем и хранить рандомизированный список в государстве под названием «Завтра», чтобы иметь возможность дает подсказку о следующих ценах. Это мои помощники, чтобы рандомизировать списки.

export function randomiseMarketList(list, day = 0){ 
    for(let i = 0; i < list.length; i++) { 
    let item = list[i]; 
    let historyQtylength = item.historyQty.length; 
    let random = randomAlgo(day); 

    item.currentPrice = Math.floor(Math.random() * (item.maxPrice - item.minPrice)) + item.minPrice; 
    item.qty = random; 
    item.available = !(day == 0 || item.qty < 1); 

    item.historyPrice.push(item.currentPrice); 
    item.historyQty.push(item.qty); 
    } 
    return list; 
} 

function randomAlgo(day) { 
    let quart = Math.floor(Math.random() * 4); 
    let multiple = Math.floor(Math.random() * 10); 
    let maxQuart = Math.floor(Math.random() * (quart * multiple * day)); 
    let minQuart = Math.floor(Math.random() * (quart * multiple)); 
    return Math.floor(Math.random() * (maxQuart - minQuart)) + minQuart; 
} 

И это мой Tomorrow редуктор:

import { ACTIONS } from '../utils/consts'; 
import { randomiseMarketList } from '../utils/helpers'; 

var initialState = { 
    currentPlaceList: [] 
}; 

export function tomorrow(state = initialState, action = '') { 
    switch (action.type) { 

    case ACTIONS.BUILD_TOMORROW_LIST: 
     console.log(action); 
     let listToRandom = action.list.slice(); 
     let randomactionList = randomiseMarketList([...listToRandom], action.day); 
     console.log(randomactionList); 
     let newList = Object.assign({}, state, { currentPlaceList: randomactionList }); 
     return newList; 

    default: 
     return state; 
    } 
} 

Как вы можете увидеть в моем ACTIONS.BUILD_TOMORROW_LIST, я утешать войти в действие, чтобы проверить значение в первом, и после того, как я войти в рандомизированном список , который всегда имеет одинаковые ценности. Я не понимаю здесь, почему у них одинаковые значения, если я их изменил.

Я думал, что это потому, что массив был абсолютно таким же, и я изменил состояние напрямую (не понимаю почему). Я передал список как новый массив, построенный значениями и оператором распространения, также не работает. Я попытался создать копию этого массива, тоже не работает.

Список в будущем будет использован для замены текущего списка Market, когда мы нажимаем на действие «остаться здесь».

handleStayHere(e) { 
    const { dispatch, status, tomorrow, market } = this.props; 
    dispatch(MarketActions.changeWholeList(tomorrow.currentPlaceList)); 
    dispatch(StatusActions.changeDay(status.day + 1)); 
    dispatch(TomorrowActions.buildTomorrowList([...market], status.day + 1)); 
    } 

Действие MarketActions.changeWholeList работает хорошо, но я не могу правильно хранить список завтрашнего дня.

Благодарим за помощь!

Answer 1

Похоже, вы не меняете элементы списка, но мутируете их в рандомизаторе. Это может привести к причудливому поведению (отлаженная проблема с этим вчера =))) Я думаю, что лучше сопоставлять значения списка новым объектам в randomiseMarketList, так что вам не нужно беспокоиться о том, что объекты объектов одинаковы и массивы - это будет быть просто другой ссылкой на объект.

randomiseMarketList(list, day = 0){ 
    return list.map(item => { 
    //it case there's another meaningful properties in item 
    ...item, 
    qty: randomAlgo(day), 
    currentPrice: Math.floor(Math.random() * (item.maxPrice - item.minPrice)) + item.minPrice, 
    available: !(day == 0 || item.qty < 1), 
    historyPrice: [...item.historyPrice, item.currentPrice], 
    historyQty: [...item.historyQty, item.qty], 
}) 

А потом в редукторе

function tomorrow(state = initialState, action) { 
    switch (action.type) { 
    case ACTIONS.BUILD_TOMORROW_LIST: 
     const currentPlaceList = randomiseMarketList(action.list, action.day); 
     return {...state, currentPlaceList} 

    default: 
     return state; 
    } 
} 

Еще один, в редукторе вы нарезка массив, а затем destructure его в другой массив - это выглядит как двойная работа, без результата.