标签: flux

我正在遵循以下视频中的"容器和组件"方法,以在Flux架构中构建可重用的组件.

React.js Conf 2015(22m 50s):https://youtu.be/KYzlpRvWZ6c？t = 22m50s

例如,我正在使用"下一步"按钮构建图像滑块.

ImageSliderContainer

• 听ImageSliderStore和保持状态(例如,CURRENTINDEX)
• 用道具渲染ImageSlider

ImageSlider

• 无状态组件,仅基于道具进行渲染
• 有一个子组件NextButton

Next按钮

• 无状态组件,仅基于道具进行渲染
• 有onClick事件

在Flux架构中,单击NextButton将向商店发送操作.然后,商店将更新"currentIndex"并发出更改事件.在我看来,ImageSlider不再可重复使用,因为它与单个商店紧密耦合,通过该商店将通知单个容器.

另一种选择是将状态"currentIndex"添加到ImageSlider组件.单击NextButton将通知ImageSlider更新其状态.但这会引入从NextButton到ImageSlider的反向数据流(违反Flux架构？).此外,它违反了"容器和组件"方法,其中组件只使用props呈现UI.

在Flux架构中制作可重用组件的最佳方法是什么？更具体地说,哪个元素(存储,容器,组件或其他东西)应该处理NextButton组件中发生的onClick事件？

编辑

根据答案,这里有一个满足Flux架构和"容器和组件"模式的解决方案.

• 容器拥有状态"currentIndex".该应用程序可能有多个容器,如ScreenshotSliderContainer和DebugSliderContainer,每个容器都维护自己的"currentIndex".
• 容器将onClick处理程序作为prop 传递给组件ImageSlider.onClick处理程序将一个动作发送到商店.
• 该ImageSlider组件是无状态的的onClick处理程序转移到子组件Next按钮.
• 因此,NextButton中的onClick事件不会影响顶级组件ImageSlider.只有容器使用新的道具呈现ImageSlider.

我正在尝试集成spring-mvc和reactjs,但这是一个太糟糕的例子,但我喜欢reactjs的flux架构师,所以我非常想将reactjs与springmvc集成!我想使用reactjs作为客户端,springmvc作为休息后端.你能给我一些例子或教程吗？我在谷歌上搜索过,但结果非常糟糕.请帮我.非常感谢你

我们正在使用FLUX架构在React JS中开发时间跟踪客户端,并且想知道整个应用程序状态应该在单个状态对象中.

• 这样父组件可以在发生更改时获取状态,并通过props将其传递给子组件

要么

• 每个组件都应该有自己的状态对象,因此当从商店触发状态更改时,它们可以单独请求其状态和setState.

我知道getInitialState在组件的生命周期中被调用一次,并且在呈现组件时会调用componentDidMount.

那么这是否意味着它们将在组件的生命周期中被调用一次？有什么不同？

除了使用flux / redux体系结构，React组件应如何与服务进行通信？

例如： 有一个容器，只有很少的代表性（反应）组件：

1. ChatBox-启用读/写消息
2. 带有密码更改器的AvatarBox-可以更改用户密码
3. 新闻流-列出新闻并对其应用过滤器

将它们视为资源表示形式，我希望它们中的每一个都可以自己访问Microservice API（获取或更新数据）。它是否正确？它将提供干净的责任管理模型，但是使用http请求加载每个组件的内容会给性能带来疑问

这个问题还涉及：如何为多个（微）服务执行有效的通信？

我是否有点混淆是否在reducer函数中使用Spread运算符或Object.assign来将更改应用于目标对象.

const toggleTodo = (todo) => {
  return Object.assign({}, todo, {
    completed: !todo.completed
   });
 };

然后上面提到的代码使用的是Object.assign方法,下面的代码是使用spread运算符

const toggleTodo = (todo) => {
return {
  ...todo,
  completed: !todo.completed
  };
};

这两者中哪种方法是合适的

我想在用户点击某个项目时将我的应用中的视频设置为"精选".我有一个动作创建者在调用时执行一个简单的console.log(),并且为了测试我调用它w/componentDidMount(),它工作正常.我有一个单独的VideoItem组件,我试图传递动作创建者,但我得到一个错误:TypeError: Cannot read property 'props' of undefined.我试图添加.bind(this)到我传递的动作的结尾,但它没有任何区别.

如果动作创建者在我调用时工作componentDidMount,为什么我不能将它传递给子组件？这是我的Video和VideoItem组件:

// Video.js


import React, { Component } from 'react'
import VideoItem from './VideoItem'
class Videos extends Component {
  componentDidMount() {
      this.props.actions.getVideos()
      // This function works, but getting error
      // when passing to VideoItem component
      this.props.actions.setFeaturedVideo()
  }
  constructor(props) {
      super(props);
  }
  render() {
    if(this.props.videos.length == 0){
      return <p>Loading....</p>
    }
    return (
        <div className="container">
          <ul className="row">
              {this.props.videos.map(function(result) {
                return (
                    <VideoItem
                    key={result.position}
                    setFeaturedVideo={this.props.setFeaturedVideo}
                    video={result}

                    />
                ) …

我想知道为什么点击表格行仍然会给我未定义的调度错误导致Uncaught TypeError: dispatch is not a function.我一直在关注这篇文章,试图解决问题,但到目前为止还没有成功.

ListingTable.js

import Table from 'grommet/components/Table';
import React from 'react';
import {remove, add} from '../action/ListAction';
import {connect} from 'react-redux'

let createHandlers = function(dispatch) {
    let onClick = function(item) {
        dispatch(add(item)) <<== undefined!!!!
    };
    return {
        onClick
    };
};
export class ListingTable extends React.Component {

    constructor(props) {
        super(props);
        this.handlers = createHandlers(this.props.dispatch);
    }
    render() {
        return <Table>
                <tbody>
                {
                    this.props.data.map((item, key)=>
                        (
                            // Undefined Error!!!!
                            <tr onClick={()=> this.handlers.onClick(item)} key={key}>

                                <td>{item.user_name}</td>
                                <td>{item.name}</td>
                                <td>{item.url}</td> …

我正在查看React中助焊剂商店的文档.他们给出了以下例子.

import {ReduceStore} from 'flux/utils';

class CounterStore extends ReduceStore<number> {
  getInitialState(): number {
    return 0;
  }

  reduce(state: number, action: Object): number {
    switch (action.type) {
      case 'increment':
        return state + 1;

      case 'square':
        return state * state;

      default:
        return state;
    }
  }
}

请参阅getInitialState():number {},这似乎不遵循任何以前的javascript语法约定.如何使用ES5语法编写这个？

说我有两个减速器.

减速机No.1:当前选择项目减速机

state = {currentlySelectedItemId: 123}

减速机2号:All-Items-Reducer

state = [{ id: 123, name: "John"}, {id: 231, name: "Jill"}, {id: 411, name: "Alf"}]

我有一个简单的React应用程序和一个React组件只显示当前选定的项目.即,基于其中的id currently-selected-item-reducer,它找到要显示的正确项目all-items reducer.

问题:

说当前选择的项目是123,我想去实现一个按钮,它始终是数组中的下一个项目.现在我需要找到123该项all-items-reducer,在该数组中获取其索引,然后递增它.然后我的React组件将完成剩下的工作.

然而,这意味着我需要访问的数组all-items-reducer在我的current-item reducer.这怎么可能？或者我在这里误解了什么？

PS:我宁愿不在我的程序中引入一个计数器currently-selected-item-reducer,因为这将是多余的信息:理论上,我应该能够通过查看all-items-reducer array和执行findIndex()或类似的东西找到当前选择的项目位置.