2016-05-03 3 views
0

Я недавно модернизировал рефлюкс от v0.3.0 до v0.4.1рефлюкс подключения/изменение поведения триггера после обновления

Когда я первый испытанный мой код после обновления, единственное изменение, которое я должен был сделать, чтобы добавить ключ к вызов моего компонента Reflux.connect.

Однако, я испытываю какое-то странное поведение:

var SomeActions = Reflux.createActions([ 
    'updateName' 
]); 

var SomeStore = Reflux.createStore({ 
    listenables: [SomeActions], 
    init() { 
    this.name = ''; 
    this.time = new Date(); 
    }, 
    getInitialState() { 
    return { 
     time: this.time 
    } 
    }, 
    onUpdateName (newName) { 
    this.name = newName; 
    this.trigger({ 
     name: this.name 
    }); 
    } 
}); 

var SomeComponent = React.createClass({ 
    mixins: [React.connect(SomeStore, 'someState')], 
    componentDidMount() { 
    SomeActions.updateName(this.props.name); 
    }, 
    render() { 
    console.log(this.state.someState); 
    ... 
    } 
}); 

Когда первый компонент монтирует состояние является правильным, содержащим только time. Однако при срабатывании действия состояние в настоящее время неверно, содержащее только name. Поведение перед обновлением было для trigger, чтобы просто добавить/обновить новые ключи в состояние. Таким образом, после триггеров действия я ожидал, что состояние будет содержать как time, так и name.

Я что-то пропустил во время обновления?

+0

вы пытались 'this.trigger ({ имя: this.name, время: это .time }); '? скорее всего, ваше состояние заменяется тем, что срабатывает, что очищает время. –

+0

Да, это работает, но в сложном приложении с несколькими и сложными хранилищами я не хочу, чтобы каждое действие заставляло триггер для каждого возможного ключа состояния. Я могу преодолеть это, создав единую оболочную функцию вокруг триггера, которую может использовать остальная часть магазина, но для этого все еще требуется, чтобы триггер принудительно использовал все возможные ключевые состояния. Я бы хотел этого избежать. –

+0

нормально, а где происходит setState? –

ответ

0

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

var SomeComponent = React.createClass({ 
    mixins: [React.connect(SomeStore, 'someState')], 
    ----------------^---------------- 
    componentDidMount() { 
    SomeActions.updateName(this.props.name); 
    }, 
    render() { 
    console.log(this.state.someState); 
    ... 
    } 
}); 

из документации

Если все, что вам нужно сделать, это обновить состояние компонента к тому, что хранилище данных передает, вы можете использовать Reflux.connect (слушатель, stateKey)

поэтому данные из магазина меняют состояние всего вашего компонента.

вы можете указать, что обновить, как этот пример, из своих документов.

var Status = React.createClass({ 
    mixins: [Reflux.listenTo(statusStore,"onStatusChange")], 
    onStatusChange: function(status) { 
     this.setState({ 
      currentStatus: status 
     }); 
    }, 
    render: function() { 
     // render using `this.state.currentStatus` 
    } 
}); 

Или вы можете вернуть все состояние в магазин, чтобы этот компонент в триггере

DOCS

Смежные вопросы