Как подключить мой реактивный компонент к хранилищу рефлюкса?

Question

Я новичок в области реактивов и рефлюкса и современной разработки JavaScript. Пытаюсь выучить. Итак, я создаю компонент, который в основном представляет собой окно чата. Список с строками и поле ввода. Когда вы вводите что-то в поле ввода и нажмите Enter, он добавляет строку в список. Я сделал работу с чистым React, используя setState(), и теперь я хочу использовать хранилище Reflux. Мой код компонента идет как это

import React from 'react'; 
import Reflux from 'reflux'; 

import ConsoleActions from '../actions'; 
import ConsoleStore from '../stores'; 

export default React.createClass({ 
    mixins: [Reflux.connect(ConsoleStore, "lines")], 
    render() { 
    var lines = this.state.lines.map(function(line) { 
     return(<li>{line}</li>) 
    }); 
    return (
     <ul>{lines}</ul> 
     <input onKeyUp={this.enter}/> 
    ) 
    }, 
    enter(e) { 
    if (e.keyCode == 13) { 
     ConsoleActions.addConsoleLines([e.target.value]); 
     e.target.value = null 
    } 
    } 
}); 

мои действия

import Reflux from 'reflux'; 

export default Reflux.createActions(["addConsoleLines","clearConsoleLog",]); 

и мой магазин импорт рефлюкс из «» с обратным холодильником;

import Actions from './actions'; 

export default Reflux.createStore({ 
    lines: [], 
    listenables: Actions, 

    getInitialState: function() { 
    return []; 
    }, 

    addConsoleLines(lines) { 
    lines.forEach(line => { 
     this.lines.append(line); 
    }); 
    }, 

    clearConsoleLog() { 
    this.lines = [] 
    } 
}); 

Не уверен, что мне не хватает, Reflux.connect() следует подключить магазин к штату, но я получаю «Ошибка типа: this.state.lines не определен» ошибка.

Answer 1

Вы должны инициировать событие изменения при добавлении строк.

export default Reflux.createStore({ 
    listenables: [Actions], 
    lines:[], 
    addConsoleLines(lines) { 
    let self=this; 
    lines.forEach(line => { 
     self.lines.append(line); 
    }); 
    self.trigger('change',self.lines); 
    }, 

    clearConsoleLog() { 
    this.lines = [] 
    } 
}); 

А в компоненте прослушивания этого события изменения

export default React.createClass({ 
    mixins: [Reflux.connect(ConsoleStore, "onChange")], 
    onChange(event,_lines){ 
     this.setState({lines:_lines}); 
    } 
    render() { 
    var lines = this.state.lines.map(function(line) { 
     return(<li>{line}</li>) 
    }); 
    return (
     <ul>{lines}</ul> 
     <input onKeyUp={this.enter}/> 
    ) 
    }, 
    enter(e) { 
    if (e.keyCode == 13) { 
     Actions.addConsoleLines([e.target.value]); 
     e.target.value = null 
    } 
    } 
}); 

Edit1: Да вы правы. Есть еще один простой способ. Смеситель Reflux.connect() проверит магазин на предмет getInitialState. Если найдено, он установит компоненты getInitialState. Я думаю, вы забыли вернуть начальное состояние.

export default Reflux.createStore({ 
    listenables: Actions, 

    getInitialState() { 
     return []; 
    }, 

    addConsoleLines(lines) { 
    ... 
    }