ReduceStore 不工作。渲染未被调用答案

【问题标题】：ReduceStore is not working. Render not being calledReduceStore 不工作。渲染未被调用
【发布时间】：2017-11-28 12:42:56
【问题描述】：

我正在使用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”方法。

我很难过一切似乎都很好，但渲染并没有为我触发：/

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

【问题讨论】：

更新：查看通量代码，看起来我不应该修改状态对象。它应该是不可变的。
更新 2：好的，这真的是一个 NEVER.ENDING.PAIN 。我曾尝试使用 Immutable，但现在 reducer 正在从我的不可变状态对象中剥离我的不可变方法。考虑倾倒助焊剂。没有如何正确执行此操作的模式或文档。

标签： reactjs flux reactjs-flux

【解决方案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;

  }
}

【讨论】：