реагируют состояние компонента не обновляется (FLUX App)

Question

Я пытаюсь передать построить среагировать/приложение потока, примерно следующее: https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

У меня есть большая часть его работает, но когда я обновить состояние компонента не перерисовывает. Может ли кто-нибудь помочь?

Спасибо. :)

---

Репо является https://github.com/jmsherry/flux_hand

CounterStore.js

import Dispatcher from 'Flux'; 
import AppDispatcher from './../dispatcher/AppDispatcher'; 
import CounterConstants from '../constants/constants'; 
import { EventEmitter } from 'events'; 
import assign from 'object-assign'; 


let _count = 5; 

function increment() { 
    _count +=1; 
} 

function decrement() { 
    _count -=1; 
} 

let CounterStore = assign({}, EventEmitter.prototype, { 

    getCount() { 
    return _count; 
    }, 

    emitChange() { 
    this.emit(CounterConstants.CHANGE_EVENT); 
    }, 

    /** 
    * @param {function} callback 
    */ 
    addChangeListener(callback) { 
    this.on(CounterConstants.CHANGE_EVENT, callback); 
    }, 

    /** 
    * @param {function} callback 
    */ 
    removeChangeListener(callback) { 
    this.removeListener(CounterConstants.CHANGE_EVENT, callback); 
    }, 

    dispatcherIndex: AppDispatcher.register(function(payload) { 
    console.log('blah', arguments); 
    var action = payload.action; 
    var text; 

    switch(action.actionType) { 
     case CounterConstants.INCREMENT: 
      console.log('inc', _count); 
      increment(); 
      console.log(_count); 
      CounterStore.emitChange(); 
     break; 

     case CounterConstants.DECREMENT: 
     console.log('dec', _count); 
     decrement(); 
     console.log(_count); 
     CounterStore.emitChange(); 
     break; 
    } 

    return true; // No errors. Needed by promise in Dispatcher. 
    }) 

}); 

export default CounterStore; 

AppDispatcher.js

import { Dispatcher } from 'Flux'; 

const AppDispatcher = new Dispatcher(); 

AppDispatcher.handleViewAction = function(action) { 
    console.log('in', arguments); 
    this.dispatch({ 
    source: 'VIEW_ACTION', 
    action 
    }); 
} 

export default AppDispatcher; 

constan ts.js

import keyMirror from 'keymirror'; 

const CounterConstants = keyMirror({ 
    INCREMENT: null, 
    DECREMENT: null 
}); 

CounterConstants.CHANGE_EVENT = 'change'; 

export default CounterConstants; 

actions.js

import AppDispatcher from '../dispatcher/AppDispatcher'; 
var CounterConstants = require('../constants/constants'); 

const CounterActions = { 

    /** 
    * @param {string} text 
    */ 
    increment() { 
    AppDispatcher.handleViewAction({ 
     actionType: CounterConstants.INCREMENT 
    }); 
    }, 

    decrement() { 
    AppDispatcher.handleViewAction({ 
     actionType: TodoConstants.DECREMENT 
    }); 
    } 

}; 

export default CounterActions; 

counter.js < - родительский вид

import React,{Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import CounterConstants from './../constants/constants'; 
import AppDispatcher from './../Dispatcher/AppDispatcher.js'; 
import Controls from './Controls'; 
import Display from './Display'; 

class Counter extends Component { 
    render(){ 
    return (
     <div className="counter"> 
     <h1>My counter</h1> 
     <Display /> 
     <Controls /> 
     </div> 
    ) 
    } 
} 

export default Counter; 

controls.js

import React,{Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import CounterConstants from './../constants/constants'; 
import AppDispatcher from './../dispatcher/AppDispatcher'; 
import CounterActions from './../actions/actions'; 

class Controls extends Component { 
    render(){ 
    console.log('here', AppDispatcher); 
    return (
     <div className="controls"> 
     <button onClick={CounterActions.increment}>+</button> 
     <button onClick={CounterActions.decrement}>-</button> 
     </div> 
    ) 
    } 
} 

export default Controls; 

display.js

import React,{Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import CounterConstants from './../constants/constants'; 
import CounterStore from './../stores/CounterStore'; 

// Method to retrieve application state from store 
function getAppState() { 
    console.log('getting app state...'); 
    return { 
    count: CounterStore.getCount() 
    }; 
} 

class Display extends Component { 
    constructor(props) { 
    super(props); 
    this.state = getAppState(); 
    } 

    // Update view state when change event is received 
    _onChange() { 
    console.log('prechange', this.state); 
    const newState = getAppState(); 
    console.log('newState', newState); 
    (newState) => this.setState; 
    } 

    // Listen for changes 
    componentDidMount() { 
    CounterStore.addChangeListener(this._onChange.bind(this)); 
    } 

    // Unbind change listener 
    componentWillUnmount() { 
    CounterStore.removeChangeListener(this._onChange.bind(this)); 
    } 

    shouldComponentUpdate(newProps, newState) { 
    console.log('shouldComponentUpdate', arguments); 
    } 

    render() { 
    let count = getAppState().count; 
    console.log('rendering', count, this.state); 
    return (
     <div className = "display" > 
     <p>State: { this.state.count }</p> 
     <p>count: { count }</p> 
     </div> 
    ) 
    } 
} 

export default Display; 

Answer 1

OK! Итак, у меня были проблемы с привязкой this, поэтому я использовал функцию стрелки es6. Я новичок в некоторых бит es6, и то, что у меня там, не будет работать. Это не то, как вы выполняете функции стрелок, поэтому он не работает ...

Answer 2

Если я что-то в вашем коде отсутствую, не вызывая setState где-нибудь, чтобы обновить состояние, которое является идиоматическим способом в React для обновления состояния и сил повторное рендеринг.

Ваш метод _onChange должен вызывать setState с новым состоянием, и компонент автоматически перезагрузится.

Больше чтение здесь:

https://facebook.github.io/react/docs/component-api.html

Answer 3

так что кажется, как будто вы вызываете SetState в скобках анонимной функции, когда вы можете просто вызвать его, используя this в вашем методе _onChange.

Попробуйте изменить этот

(newState) => this.setState;

к этому:

this.setState(newState);

Edit:

Вы, возможно, придется включить привязку к этому в отображаемым конструктору следующим образом:

constructor(props) { 
    super(props); 
    this.state = getAppState(); 
    this._onChange = this._onChange.bind(this); 
    }