标签: flux

鉴于我有用户输入反应的AJAX基于搜索字段,请求搜索结果从通过AJAX后端,示出了在下面的搜索字段下拉的结果,允许导航通过经由光标键搜索结果和反作用于esc在按键聪明的方式.

由于当前基于Backbone的组件在很多方面被打破,我想重新实现该搜索组件使用React和可能的Flux架构.

在规划期间,结果表明,我的组件至少有10个不同的状态(可能更多),它必须对actions用户输入触发做出反应,并且还要actions由异步服务器响应触发.

问题1:我应该在a store而不是父组件中建模所有状态吗？这意味着,每个用户输入都会更改存储状态,例如:searchQuery,:searchResults并且我的父视图组件会对该状态的更改做出反应？

问题2:或者我应该在父组件本身中建模所有状态并省略a store,dispatcher并且actions完全？

问题3:store事实证明,独立于处理父组件本身或其中的状态,组件本身可以具有至少10种不同的状态,并且应该只允许一定数量的转换.通常,我会在这里引入一个statemachine实现,在每次接收到一个动作时都会建模:states并允许:transitions和执行转换,store或者在父组件中调用一个回调方法.什么是正确的React way处理states和transitions它们之间states的一个组成部分？

问题4:FluxJavascript 的最新实现是哪种？到目前为止,我已经看到了反流,但我不确定,这是我的毒药.

我愿意接受各种建议.

我正在研究一种使用助焊剂和反应的简单原型.以前当我使用React时,我已经将子组件中的事件发送到其父组件(已在子组件上注册了prop回调),然后在父组件中更改了状态.

遵循Flux架构是否应通过Dispatcher提升所有事件？例如,即使是一个简单的用户事件,例如选中复选框,也应通过此链引发:

1. 在组件事件处理程序中创建一个操作
2. 发送给调度员
3. 调度员发送到商店
4. store将更改事件发送到控制器视图
5. 控制器视图回调到商店以获取更改

谢谢

我喜欢Flux如何专注于关注点和单向数据流的分离,但这也让我想知道我应该如何合并像fabricJS这样的画布库.

FabricJS在本机canvas元素上创建对象模型,以扩展和简化功能.我的问题是,是否在View(React组件)中初始化FabricJS画布元素并直接在View中处理画布上的所有操作,只存储和更新画布状态或在View中设置canvas元素,然后注册所有画布操作使用Store并使用View来分派动作？

套接字在哪里适合Flux单向数据流？我已经阅读了两种思路,即远程数据应该进入Flux单向数据流.我看到获取Flux应用程序的远程数据的方式是在进行服务器端调用时,例如,在承诺中解析或拒绝.在此过程中可能会触发三种可能的操作:

1. 乐观更新视图的初始操作 (FooActions.BAR)
2. 解决异步承诺时的成功操作 (FooActions.BAR_SUCCESS)
3. 异步承诺被拒绝时的错误操作 (FooActions.BAR_ERROR)

商店将监听操作并更新必要的数据.我已经看到了来自动作创建者和商店内部的服务器端调用.我使用动作创建器进行上述过程,但我不确定是否应该通过Web套接字获取数据.我想知道插座适合下图.

我正在探索ReactJS并试图掌握核心概念.我开始拼接我正在处理的应用程序的原型,该应用程序具有以下层次结构

• 顾客
  • 地点
    • 地址
    • 往来

我正在处理的页面将是客户及其所有相关子项的输入表单.这些部分中的每一部分都有一些文本输入来存放数据,因此它们看起来像是容纳组件层次结构的自然场所.

从我读过的关于ReactJS的所有内容中,如果你要管理状态,你应该在所有控件的共同祖先中这样做.这意味着孩子的任何变化都应该将事件冒充到州的管理者处理变化.然后应该更新状态,并且将重新呈现任何更改.这在简单的场景中是有意义的,但这使我进入了稍微复杂的层次结构.

• 如果在多个地址中的某个地址发生变化,我是否应该将该事件冒泡到该位置然后再向客户冒泡？
• 如果是这样,告诉状态哪个特定地址发生变化的最佳方法是什么？
• 如果你必须通过层次结构的每个级别调用,那么传播一个简单的更改会不会产生很多额外的样板？
• 我应该在每个文本框中附加onChange事件,还是应该等到我提交表单来收集数据？

React谈到ReactLink(https://facebook.github.io/react/docs/two-way-binding-helpers.html)作为一种管理更复杂的数据绑定的方法,但没有给出一个很好的例子来说明如何使用更大的层次结构来管理它.此外,它声明大多数应用程序不应该需要这个.好吧,这个应用程序确实不复杂,只有几个嵌套控件具有共享状态.这就是React应该闪耀的地方,所以我不会想到立即跳到边缘案例解决方案.

我有一个看起来像这样的reducer树:

module.exports = combineReducers({
    routing: routeReducer,
    app: combineReducers({
        setup: combineReducers({
            sets,
            boosters
        }),
        servers: combineReducers({
            servers
        })
    })
});

现在,setup密钥包含一个表单,一旦我们提交它就需要重置.不过,我也没有办法访问整个setup树,因为使用combineReducers意味着减速器只在树(的叶节点操纵数据sets,并boosters在这种情况下).

我的第一个冲动是创建一个减少整个设置树的函数,如下所示:

function setup(state, action){
    //If there's an action that affects this whole tree, handle it
    switch(action.type){
        case "FORM_SUBMIT": //DO STUFF
        break;
    }

    //Otherwise just let the reducers care about their own data
    return combineReducers({
                sets,
                boosters
    })(state);
}

但这不起作用,也搞砸了我的第一个代码示例的漂亮树结构.

使用redux有更好的解决方案吗？

如果你是一个很大的遗留Angular 1代码库并且你不想引入新的依赖项(比如ngRedux),那么开始使用经典的Angular 1功能是一个糟糕的主意,比如$ rootScope,$ broadcast,$ on ,$ watch实现类似Redux的架构？

我看到它的方式,可以做如下:

• 对于商店/模型 - >使用 $rootScope
• 对于store.dispatch(ACTION)- >使用$rootScope.$broadcast(ACTION)
• 减少器将作为注入$rootScope和执行的服务来实现$on(ACTION)
• 控制器可以看更改对$rootScope与$watch和更新一个或多个视图可以直接绑定到$rootScope属性

只要你不遵守$rootScope属性上的奇怪的异地突变,就可以将所有应用程序逻辑保留在Reducers中并将控制器代码保持在最低限度,我可以看到的最大缺点是由于Angular而导致性能下降1个昂贵的消化周期.但是,如果你也可以坚持不可变的数据结构,甚至可能不是这样.

这是一个坏主意吗？有人试过吗？

redux app就我所知,维护状态树的正确方法是将其标准化,尽可能地展开数据并使用combinereducer创建状态树的切片.

示例包含帖子和用户的应用程序

const rootReducer = combineReducers({
  user:userReducer,
  posts:postsReducer,
});
const store = createStore(rootReducer);

给出的帖子数组保留所有帖子初始化,State.posts可以看起来像

let initialState =   {
    byId:{1:{id:1,title:'post1'}},
    ids:[1],
    meta_data:{unread:1,old:0}
    }

现在,如果我们有大约10,000个帖子,我们最终会这样做,state.post.ids.length === 10000这很好,

问题是.因为我们的reducer 每次需要更新时返回一个新状态,例如我们需要将meta_data.unread更新为等于0,我们将返回一个新的Post对象.

return object.assign({},state,{meta_data:{unread:0,old:1}})

这将重新渲染使用state.post树的任何属性的所有选择器和组件!

这听起来像是一个问题吗？**我们想要的只是更新未读的计数器..为什么要重新计算帖子的所有选择器和组件？

所以我有这个想法可能是state.posts也应该组成使用combineReducers使每个attr.帖子应该有自己的减速器.

将postsReducer分成多个

postsMainReducer, ==> deal with adding or removing posts
postMeta_dataReducer, ==> deal with meta_data of posts
singlePostReducer ==> Now this is dynamic !! how can i create such ??

这是正确的吗？我增加了比需要更多的复杂性？

- >有人可以向我们展示已经运行的企业应用程序状态树的图片吗？所以我们可以从中学习如何组织国家？

有关奇怪错误的问题,仅在某些浏览器中出现.

我有一个巨大的单页面应用程序,类似于文件和文件夹的文件存储.这个应用程序建立在react和flux上,我使用react-router进行路由.

在某些浏览器中,我发现了一个严重的错误,我找不到合适的解决方案.

问题是,当我尝试下载文件夹中的文件时,会出现以下错误:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

然后

Uncaught (in promise) Error: Attempted to update component `Header` that has already been unmounted (or failed to mount).

'标题' - 应用程序的组件之一.

奇怪的是,此错误仅在某些版本的Chrome和Firefox中出现.我认为问题是第一个错误.

这是我的webpack配置:

const webpack = require('webpack');
const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {
    context: __dirname + '/src',
    entry: {
        index: './index'
    },
    output: {
        path: __dirname + '/public',
        publicPath: "/public",
        filename: "bundle.js" …

当我使用我的自定义FLUX CE和flux.filed.text时,每当我保存我的文本时,我会<p></p>在aech段后得到新的empry行.在段落之间添加空行<p><br></p>

在默认的flud_styled_content中,如TextMedia,Text,TextPic - 一切都很好.只是滞后于此

<flux:field.text name="text" label="Text" 
                 enableRichText="TRUE"/>

我试过了:

1. swich off autoParagraph 关闭CKEditor 3.0中的<p>标签
2. 重新加载配置和创建自定义也尝试了不同的默认,最小,自定义等 .https://github.com/FluidTYPO3/flux/issues/1388#issuecomment-311618318

我发现前端有多干净 - 我只是在输出中添加了

 <f:format.html parseFuncTSPath="">{text}</f:format.html>

但我不喜欢当每一个元素保存我得到越来越多的epty线

TYPO3 8.7.1 + FLUX 8.2.1