Как обновить магазин редукторов

У меня есть такой магазин

export const list = [
    {
        id: 0,
        tableName: 'example',
        tasks: [
            {
                task_id: 0, 
                task_short: 'lorem',
                task_full: 'lorem ipsum lorem ipsum lorem ipsum',
                time_created: '10:20',
                time_created: null, 
            },
            {
                task_id: 1, 
                task_short: 'andsf',
                task_full: 'lorem ipsum tes tes est',
                time_created: '13:20',
                time_created: null, 
            }
        ]
    }
]

если я изменю tableName или добавлю новый с помощью этого редуктора

import { list } from './list'

export default (state = list, action) => {
    const { type, payload } = action
    switch(type) {
        case 'ADD_TABLE':
            return [...state, payload]
        case 'DELL_TABLE':
            return  state.filter( ( tabl ) => tabl.id != payload )   
        case 'CHANGE_TITLE':
            let basket = state.map( bas => bas.id == payload.id ? bas.tableName = payload.val : bas )
            return [...state]
        case 'ADD_TASK':
            const newer = state.map( tas =>  tas.id == payload.id ? tas.tasks.push(payload.t) : tas)
            return [...state]

        default:
            return state
    }
}

все работает !!

но если я нажимаю новую задачу в задания, в консоли она сохраняется, но не отображается.

Для рендеринга мне нужно изменить tableName, и после этого все появится

Я полагаю, проблема здесь

case 'ADD_TASK':
                const newer = state.map( tas =>  tas.id == payload.id ? tas.tasks.push(payload.t) : tas)
                return [...state]

вот демо http://kanban.antus.pro/

и репо введите описание ссылки здесь

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
48
1

Ответы 1

Array.push() изменяет исходный массив, это анти-паттерн в redux https://redux.js.org/faq/immutabledata

Вы должны изменить эту строку

const newer = state.map( tas => tas.id == payload.id ? tas.tasks.push(payload.t) : tas)

на этом

const newer = state.map( tas => tas.id == payload.id ? [...tas.tasks, payload.t] : tas)

поэтому вы не измените исходный массив tas.tasks

старайтесь не использовать методы из этого списка в редукторе https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype#Mutator_methods

Я изменился, как вы написали, но все так же :(

Anton 24.10.2018 13:53

Я понял проблему, вы сохраняете результат state.map в newer, но возвращаете [...state], поэтому попробуйте return state.map( tas => tas.id == payload.id ? [...tas.tasks, payload.t] : tas)

ivankoleda 24.10.2018 13:56

TypeError: Невозможно прочитать "карту" свойства неопределенного TaskItem.render src / components / task / TaskItem.js: 11 8 | const {parentID, task} = this.props 9 | //console.info(task) 10 | > 11 | const taskItem = task.map (task => | ^ 12 | <p key = {task.task_id}> {task.task_short} </p> 13 |)

Anton 24.10.2018 14:01

Когда я нажимаю, используя спрайты, он возвращает только массив задания,

Anton 24.10.2018 14:07
return state.map( tas => tas.id == payload.id ? { ...tas, tasks: [...tas.tasks, payload.t] } : tas)
ivankoleda 24.10.2018 14:31

Ой, приятель, спасибо тебе огромное !!!)))) Я люблю тебя))) Это застряло вчера утром, ага .. Я счастлива =)

Anton 24.10.2018 14:43

Другие вопросы по теме