Реквизиты React-Redux и Chart.js Не перерисовывать

Я новичок в React-Redux и создаю приложение, которое динамически обновляет диаграммы (из react-chartjs) на основе флажков, которые щелкает пользователь. (см. ссылку на репозиторий github ниже!)

моя проблема возникает, когда пришло время обновить реквизиты, которые содержат данные, которые диаграммы используют для отображения информации. Вот что он делает правильно:

1. запускает действие: Home.js

<div class="checkbox">
                        <label>
                            <input type="checkbox" value="journal" onClick={this.props.updateRadar.bind(null, this.props.charts)}> Journals </input>
                        </label>
                    </div>
  1. правильный редуктор называется:

  2. состояние обновляется в редюсере (структура данных диаграмм глубоко вложена, поэтому я использую метод react.addons.update()): reducers/charts.js

    switch(action.type) {
            case 'UPDATE_RADAR' :
                    var radardata = [0,0,0,0,0,0,0];
                    var labels = ["January", "February", "March", "April", "May", "June", "July"]
    
    
                return  update(state, {
                    radar: {
                        datasets: {
                            0: {
                                data: {$set: radardata }
                            }
                        }
                    }
                })
    
            default:
                return state;
    
        }
    

    }

  3. Состояние Redux обновляется, отражая изменения (проверено с помощью Redux Devtools):

Вывод Redux DevTools

Я поместил ComponentWillRecieveProps в свой компонент и использовал console.log для проверки содержимого nextProps, и nextProps также показывает обновленные изменения. элементы/SpiderGraph.js:

componentWillReceiveProps: function(nextProps) {
        console.log(nextProps);

    },

Консоль с обновленными реквизитами

Однако, когда я захожу в React devtool и копаюсь в реквизите, который следует изменить, отраженных изменений нет, только старые данные:

В React devTool свойства остаются неизменными

Я правильно сопоставил функцию statetoprops с правильными данными (по крайней мере, я так думаю). приложение.js:

function mapStateToProps(state) {

    return {
        charts: state.charts


}

}

Я просто не могу понять, чего мне не хватает.

Ссылку на текущий проект github можно найти по этой ссылке

Если кто-нибудь может взглянуть на это, так как у меня закончились идеи о том, что я мог делать неправильно. Если у вас есть какие-либо вопросы или проблемы для меня, пожалуйста, не стесняйтесь спрашивать!

С уважением Робби


person Robbie Robinson    schedule 13.06.2016    source источник


Ответы (1)


Я думаю, что это не проблема редукции/реакции. В консоли вы, вероятно, увидите эту ошибку: «Невозможно прочитать свойство «длина» неопределенного - core.js». Если вы удалите компонент «RadarChart», а затем измените параметр «radar» на «bar» в редюсере. Вы увидите, что «BarChart» работает. Или другой вариант: вы можете добавить свойство "перерисовывать" в компонент "RadarChart".

ссылка: https://github.com/jhudson8/react-chartjs/issues/80

person Kokovin Vladislav    schedule 14.06.2016