Question

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

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

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

有一个类似的问题，似乎你必须为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; } }的修改被召唤。

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

ReadJson

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

1 个答案: