ReduceStore不起作用。呈现未被调用

Question

我正在使用flux reducestore，它似乎没有工作。如果我更改了应用程序状态，则视图不会更新，并且不会调用render方法。

我只是简单地渲染我的应用程序：

ReactDOM.render(
  <div>
    <AppContainer/>
  </div>
  , app);

这是渲染一个组件（一个磁通容器），只显示一个文本字段和一些来自应用程序状态的文本。状态值可在此处找到：this.state.app.name

我的申请视图：

import {Component} from 'react';
import {Container} from 'flux/utils';
import AppStore from './AppStore.js';

import dispatcher from "./AppDispatcher.js";

class AppContainer extends Component {

  static getStores() {
    return [AppStore];
  }

  static calculateState(prevState) {
    return AppStore.getState();
  }

  changeText(event) {
    var changeName = function(newName) {
      dispatcher.dispatch({
        type: "CHANGE_NAME",
        newName,
      });
    }
    changeName(event.currentTarget.value);
  }

  render() {
    return (
      <div>
        <div>{this.state.app.name}</div>
        <input type="text" className="form-control" onChange={this.changeText}/>
      </div>
    );
  }
}
export default Container.create(AppContainer);

this.state.app.name可在此处的状态对象中找到：

州：

const AppState =
  {
    app: {
        name: "i want to change",
    }
  }
export default AppState;

这家商店是一家助焊剂商店

商店：

import {ReduceStore} from "flux/utils";

import AppState from "./AppState.js";
import AppDispatcher from "./AppDispatcher.js";

class AppStore extends ReduceStore {
  constructor() {
    super(AppDispatcher);
  }

  getInitialState() {
    var state = AppState;
    return state;
  }

  reduce(state, action) {
    switch (action.type) {
      case 'CHANGE_NAME':
        var newName = action.newName;
        state.app.name = newName;
        break;
    }
    return state;
  }
}

export default new AppStore();

据我所知，一切看起来都很好，但组件没有渲染。如果我在文本字段中更改文本，则会触发操作并调用reduce方法。调用“state.app.name = newName”行，但在我的视图中不调用'render'方法！

它说当使用ReduceStore时你不应该使用setState（..），你只需要更改状态对象就可以了，但它似乎对我不起作用。也没有需要调用的'emitChange'方法。

我很难过，一切似乎都很好，但渲染不是为我触发的：/

很抱歉用所有这些代码轰炸，但我找不到一个小提琴式的网站，它可以显示我需要的所有文件。理想情况下，我想在实时链接中显示这一点。

Answer 1

有一个类似的问题，似乎你必须返回一个新对象，而不是修改传递给渲染函数的state，以便调用emit和render方法。

所以我会做出以下改变......

getInitialState() {
    return AppState;
}

reduce(state, action) {
  switch (action.type) {

    case 'CHANGE_NAME':

      var newName = action.newName;
      var newState = Object.assign({}, state);
      newState.name = newName;  
      return newState;

    default:

      return state;

  }
}