最近我进行了一项关于开发电子商务网站的初步研究,发现还原和回流都来自Facebook的通量架构,而且两者都很受欢迎.我对这两者之间的区别感到困惑.

什么时候应该使用redux vs reflux,哪个在电子商务Web应用程序的开发阶段最灵活？

到目前为止,我对属性如何通过参数从一个组件传递到另一个组件的知识程度如下

//开始:我的知识范围

假设存在一些名为的状态变量 topic在A.jsx中.我想把它传递给B.jsx,所以我执行以下操作

B = require('./B.jsx')
getInitialState: function() {return {topic: "Weather"}}
<B params = {this.state.topic}>

在B.jsx中,我可以做类似的事情

module.exports = React.createClass({
render: function() {
   return <div><h2>Today's topic is {this.props.params}!</h2></div>
}
})

在被召唤时将呈现"今天的主题是天气!"

//结束:我的知识范围

现在,我将通过以下代码片段阅读react-router教程

topic.jsx:

module.exports = React.createClass({
  render: function() {
    return <div><h2>I am a topic with ID {this.props.params.id}</h2></div>
    }
  })

routes.jsx:

var Topic = require('./components/topic');
module.exports = (
  <Router history={new HashHistory}>
    <Route path="/" component={Main}>
      <Route path = "topics/:id" component={Topic}></Route>
    </Route>

  </Router>
)

header.jsx:

  renderTopics: function() {
    return this.state.topics.map(function(topic) { …

如果flux存储是一个维护数据状态的单例,为什么组件在访问存储时使用setState而不是setProps？这不仅仅意味着我开始在两个(或更多)位置保存应用程序状态吗？

Flux/React文档和示例似乎都指向setState作为首选解决方案,但我与一些同事在工作中进行了一次有趣的对话,并想知道是否有其他人遇到过此问题

编辑:你可以在这个网址中看到我在说什么:https: //github.com/facebook/flux/blob/master/examples/flux-chat/js/components/ThreadSection.react.js

注意ThreadSection是一个子组件,它直接从商店获取数据并将其用作状态.

如果你遵循React"方式"我会期望状态由商店管理 - 而不是子组件.

我们想到的解决方案是获取顶级组件中的所有商店(作为props),并根据需要将它们传递给子组件.但这很快变得相当丑陋.

我们这样做是因为setProps不适用于子组件

我们最近从Angular切换到React + Flux来构建一个相当复杂的业务应用程序.

采用一个容器组件将所有状态作为属性传递给组件树的方法不是为我们开发应用程序的实用方法,因为应用程序使用大型页面模式.足够的状态确实传递给他们将模型加载到他们的商店的模态.

我遇到的问题是我需要将一些初始状态(作为道具传递下来)放入模态组件的商店中.在这篇文章中,Facebook上的好人说,当同步不是目标时,可以使用道具作为初始状态.

这就是我目前将初始状态输入我的商店的方式:

var ABC = React.createClass({
  ...  
  getInitialState: function() {
    return ABCStore.getInitialABCState(this.props.initialA);
  },
  ...

var ABCStore = Reflux.createStore({
  ...
  init: function() {
    _state = {
      a: null,
      b: 'B init',
      c: 'C init'
    };
  },

  getInitialABCState: function(initialA) {
    _state.a = initialA;
    return _state;
  },

  getABCState: function() {
    return _state;
  }
  ...

我不确定这样做的最佳做法是什么,或者这是否是Flux反模式？

大纲

在我的应用程序中,我正在使用React和Reflux,并对我的数据进行分层设置.我正在尝试将我的应用程序的元素分解为单独的商店,以便能够正确地挂钩事件并分离问题.

我有以下数据流:

Workspaces -> Placeholders -> Elements

在此方案中,创建工作空间时,必须依次使用对新创建的工作空间的引用(ID)创建默认占位符.这同样适用于占位符与元素关系.

关键

Reflux方式似乎表明PlaceholderStore会从WorkspaceStore中侦听触发器,并将新创建的ID添加到this.trigger().

Reflux只允许从商店触发单个事件; 从而防止外部组件能够辨别create或update动作.这意味着如果商店中的一个触发器发送ID argument[0],则后续触发器应该执行相同的操作(以保持一致).对于寻找多个工作空间更新的组件(例如重新排序/批量更新),这是一个问题.

不受欢迎的解决方案

我曾想过要加上一个概念StoreActions; 只有商店可以创建的操作,然后其他商店才会收听(有效地从商店中丢弃原始触发器).通过这些组件/商店可以监听特定事件,并且可以毫无顾虑地定制传递给所述事件的参数.这似乎是一种错误的方式去滥用Reflux事件系统.

救命

我应该尝试分解相关数据吗？是否有更好的方法来构建数据？

我已经阅读了关于聚合商店的信息,但没有看到任何解剖的实现.这些是通过将来自多个商店的数据放在一起提供解决方案吗？如果是,那么负责创建React组件可以收听的事件的是什么？

非常感谢任何人提供的任何帮助/见解!

我来自Reflux到Redux.在Reflux中你的业务逻辑只存在于商店中,但在Redux中它似乎不同......例如在" Redux "中,我有"async-action",我用" redux-thunk " 实现它.

在一个场景中,我想在我的操作中检查一些内容,如果需要我向服务器发送请求并获取一些数据.在这种情况下,我必须在我的行动中检查我的逻辑,实际上我的业务逻辑存在于行动中并存储在一起并且它不好......你的解决方案是什么？

例如我有复选框,我检查一些条件,如果结果是真的我发送请求到服务器这里是我的动作代码,因为你看到我的业务逻辑是在我的行动和我的减速机:

export function onCheckboxClick({itemId}) {
  return (dispatch, getState) => {
      let state = getState().get('myReducer');

      let myConditionResult = state.get('foods').get(0).get('test');//for exmaple check some condition in my store

      dispatch({type: 'CHECKBOX_CLICK', itemId});// for change the checkbox checked

      if (myConditionResult) {
        myApi.deleteOrderItem({itemId}).then(()=> {
          dispatch({type: 'DELETE_ORDER_ITEM_FULFILLED', itemId});
        }).catch((err)=> {
          console.log(err);
          dispatch({type: 'DELETE_ORDER_ITEM_REJECTED', itemId});
        });
      }
   };
}

提前致谢

我不明白为什么我们需要Flux和React作为React本身让我们维护应用程序的状态.每个组件都具有初始状态,并且可以通过用户操作或任何其他异步JavaScript更改状态.

为什么React只能被视为一个视图库,它可以让我们定义应用程序的状态,并在状态发生变化时更新视图.这不是一个视图所做的......它完整的MVC做得对吗？

例如:这里是仅使用React 的Todo应用程序构建,这里是使用Flux和React的Todo应用程序构建.

如果我们只用React构建Todo应用程序那么为什么我们需要Flux？

从阅读文档我不太了解Reflux异步操作如何工作.特别是我需要在异步操作完成时触发某些操作.

在我的一个组件中,我想要监听异步操作完成,然后转换到视图.

mixins: [State, Navigation, Reflux.listenerMixin],

componentDidMount() {
  this.listenTo(actions.loadProject.completed, ()=>{this.transitionTo('info')});
},

我创建了这样的动作:

var actions = Reflux.createActions([
  "someSyncAction",
  "anotherSyncAction"
]);

actions.loadProject = Reflux.createAction({
  "loadProject": {children: ['completed','failed']},
});

在我的projectStore中我有这样的东西:

 onLoadProject(id) {

    var url = '/api/projects/' + id;
    io.socket.get(url, (body, jwr) => {

      if(jwr.statusCode !== 200){
        console.error('Failed to load project', id, body);
        return actions.loadProject.failed();
      }

      var p = body;
      debug('loaded project', id, p);
      this.project = p;
      this.trigger(p);
      actions.loadProject.completed();
    });
  },

但是看起来actions.loadProject.completed不是一个函数,所以上面的代码不起作用.什么是正确的方法？

使用RefluxJS初始化数据(异步)的正确方法是什么？是否有类似于AngularJS的解决方案,或者Flux实现与此无关(路由器应该处理这种可靠性)？

我正在使用React和Reflux构建一个应用程序,我正在尝试按特定顺序呈现项目列表.

这些项是按反向时间顺序呈现的自定义Post组件,因此最新的帖子位于列表的顶部.

我正在使用可汗学院的TimeoutTransitionGroup让列表项淡入淡出.

我看到的问题是,当我添加一个新帖子并且组件通过新道具获取更新列表时,转换发生在列表中的最后一个元素而不是第一个元素上.我想拥有它,以便第一个元素淡入,因为这是添加的新项目的位置.

帖子2 < - 这篇文章是新增的

帖子1 < - 这篇文章淡入

有没有办法指定相同的项目顺序,但是以相反的顺序渲染它们,或类似的东西？

这是我组件的渲染功能:

    if (!(this.props.posts && this.props.ordering)) return false;
    var posts = this.props.ordering.map(function(postId, index) {
        return <Post key={index} post={this.props.posts[postId]}/>;
    }, this);
    return (
        <div className="post-collection">
            <TimeoutTransitionGroup 
                enterTimeout={500}
                leaveTimeout={500}  
                transitionName="postTransition">
                {posts}
            </TimeoutTransitionGroup>
        </div>
    );

这是CSS过渡:

.postTransition-enter {
    opacity: 0;
    transition: opacity .25s ease-in;
}

.postTransition-enter.postTransition-enter-active {
    opacity: 1;
}

.postTransition-leave {
    opacity: 1;
    transition: opacity .25s ease-in;
}

.postTransition-leave.postTransition-leave-active {
    opacity: 0;
}

任何帮助都感激不尽!