标签: flux

我有点想到如何实现一个reducer,其实体可以有相同类型的子.

让我们以reddit注释为例:每个注释都可以有子注释,可以自己注释等等.为了简化原因,注释是类型的记录{id, pageId, value, children},pageId是reddit页面.

如何为减速机建模？我正在考虑让reducer成为一个map - > id的注释,你可以使用它来逐页过滤pageId.

问题是,例如当我们想要为嵌套的注释添加注释时:我们需要在地图的根上创建记录,然后在父子属性中添加其id.要显示我们需要获取所有这些注释的所有注释,请过滤掉我们在顶部的那些注释(例如,将它们作为orderedList保存在页面reducer中)然后迭代它们,从注释对象获取时我们遇到使用递归的孩子.

有没有比这更好的方法或有缺陷？

例如...

export const user = (state = {
  id: localStorage.getItem('id'),
  name: localStorage.getItem('name'),
  loggedInAt: null
}, action) => {
    case types.LOGIN:
      localStorage.setItem('name', action.payload.user.name);
      localStorage.setItem('id', action.payload.user.id);
      return { ...state, ...action.payload.user }

    default:
      return {  ...state, loggedInAt: Date.now() }
}

这是我正在做的缩小版本,默认按照预期从localStorage返回状态.但是,一旦刷新页面,我的应用程序状态实际上是空白的.

在上周,我一直试图理解双向数据绑定(Angular)和单向数据流(React/Flux)是如何不同的.他们说单向数据流更强大,更容易理解和遵循:它是确定性的,有助于避免副作用.然而,在我的新手眼中,它们看起来几乎相同:视图监听模型,模型对视图所做的操作做出反应.两者都声称模型是真实的唯一来源.

任何人都能以可理解的方式全面解释它们之间的真正差异以及单向数据流如何更有益且更容易推理？

React新手的常见问题是为什么双向数据绑定不是内置功能,而通常的响应包括对单向数据流的解释以及出于性能原因而不总是需要双向数据绑定的想法.这是我想要更详细了解的第二点.

我目前正在为apollo-link-state(来自Apollo的新客户端状态管理工具)的表单库工作.除了使用apollo-link-state而不是redux作为状态管理器之外,这个概念与redux-form非常相似.(请注意,表单状态与域实体的状态分开存储,但实体可以选择用于填充表单的初始状态.)

当用户在表单上进行更改时,库会立即通过onChange处理程序更新存储.我正考虑允许个别字段选择退出该行为,以防程序员关注性能,但后来我开始怀疑这何时会成为真正的性能问题.oninput无论如何,浏览器都会触发事件,因此我能想到的唯一性能考虑因素是存储是否随用户类型而更新.当然,执行突变而不仅仅是调用会产生额外的开销setState(),但这实际上只相当于一些额外的函数调用.让我们假设我没有使用apollo而只是调用一个直接更新某个全局存储的函数 - 那么性能考虑是什么呢？

我的想法是,如果表单支持在用户键入一个字段时立即更新表单状态,那么对于所有字段也可以这样做.用户一次只能键入一个字段,我看不到使某些字段有时更快(可能忽略不计)的页面的好处,有时候会慢一些.此外,我的库允许消费者使用他们想要的任何输入组件,因此如果程序员只想要更少的状态更新,他们就可以编写一个组件来消除React的onChange事件或使用浏览器自己change或blur事件.

我在这里错过了什么吗？在用户提交表单之前,我的库的用户是否还想忽略特定字段的更改？或者更有用的选择是忽略对整个表单的更改(直到提交)？

这是我当前方法背后的基本概念的基本(大大简化)说明:

// defined in a globally-accessible module
const formState = {
    // This somehow causes any dependent form components to re-render
    // when state changes
    update(formName, updatedState) {
        ...
    }
}
export default formState

...
// UserForm.js:

export default class UserForm extends PureComponent {
    componentDidMount() {
        formState.userForm = {
            firstName: '',
            lastName: '',
        }
    }

    handleChange(e) {
        const { …

我的代码 https://gist.github.com/ButuzGOL/707d1605f63eef55e4af

因此,当我获得登录成功回调时,我想进行重定向,
重定向也通过调度程序工作.

而且我得到的是Dispatch.dispatch(...):无法在发送过程中发送.

在中间是否有任何黑客行动？

我是redux和es6语法的新手.我使用官方的redux教程制作我的应用程序,并使用此示例.

下面有JS片段.我的观点 - 在帖子reducer中定义REQUEST_POST_BODY和RECEIVE_POST_BODY个案.主要难点 - 在商店中查找和更新正确的对象.

我尝试使用示例中的代码:

  return Object.assign({}, state, {
    [action.subreddit]: posts(state[action.subreddit], action)
  })

但它使用了简单的帖子.不需要通过id找到正确的帖子.

这是我的代码:

  const initialState = {
    items: [{id:3, title: '1984', isFetching:false}, {id:6, title: 'Mouse', isFetching:false}]
  }

  // Reducer for posts store
  export default function posts(state = initialState, action) {
    switch (action.type) {
    case REQUEST_POST_BODY:
      // here I need to set post.isFetching => true
    case RECEIVE_POST_BODY:
      // here I need to set post.isFetching => false and post.body => action.body
    default:
      return state;
    }
  } …

我是React的新手,我想问一个关于如何最好地完成必须在兄弟组件之间传递数据的任务的策略问题.

首先,我将描述任务:

假设我有多个<select>组件是单个父组件的子组件,它们动态地向下传递选择框,由数组组成.每个框在其初始状态下具有完全相同的可用选项,但是一旦用户在一个框中选择特定选项,它必须在所有其他框中作为选项禁用,直到它被释放.

这是(愚蠢)代码中的相同示例.(我用它react-select作为创建选择框的简写.)

在这个例子中,disabled: true当用户在一个选择框中选择它们时,我需要禁用(即设置)"它是我最喜欢的"和"它是我最不喜欢的"选项(如果用户取消选择它们,则释放它们).

var React = require('react');
var Select = require('react-select');



var AnForm = React.createClass({

    render: function(){


        // this.props.fruits is an array passed in that looks like:
        // ['apples', 'bananas', 'cherries','watermelon','oranges']
        var selects = this.props.fruits.map(function(fruit, i) {

            var options = [
                { value: 'first', label: 'It\'s my favorite', disabled: false },
                { value: 'second', label: 'I\'m OK with it', disabled: false },
                { value: 'third', label: 'It\'s my least favorite', disabled: …

我一直在使用React + Flux应用程序中的乐观更新,并看到两件事:

1. 如果用户在存在一些未完成的操作时尝试关闭窗口会发生什么.例如在Facebook中,即使没有真正持久化,也会在墙上显示一条消息(这是乐观更新所做的,对用户来说响应更快的应用程序).但是,如果用户在墙上发布并立即关闭应用程序(在注销或窗口关闭时),帖子可能会失败并且他不会收到警报.
2. 我不喜欢Stores管理他自己的实体(例如消息)的想法以及为persiste消息触发的动作的情况(加载,成功,失败？).它混合了一些东西.

因此,我致力于此并创建一个ActionStore来管理由组件触发的操作的状态.这是源代码,这是一个现场演示.

它的工作方式或多或少是这样的:

1. 组件层次结构的根(redux中的容器)获取新操作的nextId并将其传递给他的子项,如props(这很难看).
2. 子组件触发一个动作:它保持actionId以便在之后向商店询问并调用动作创建者.
3. 动作创建者创建一个新的Action并将函数返回给中间件.
4. 从Action返回的函数使用API​​调用创建一个新的Promise,并调度类型为XX_START的操作.
5. ActionStore会侦听XX_START操作并保存它.
6. 子组件接收新状态并找到具有已保存ID的操作,并询问当前情况:加载,成功或失败.

我这样做主要是为了将"实体"的状态与动作的状态分开,但允许具有相同有效负载的重新触发操作(如果服务器临时关闭或者如果我们收到500响应状态,这可能很有用用户松动的信号).

此外,拥有操作存储允许在用户注销或关闭窗口之前轻松询问它们是否为待处理操作.

注意:我正在使用针对Rest API的单应用程序页面Web应用程序,我不认为在服务器端呈现时使用它

这是一个可行的选择创建一个ActionStore或我打破一些Redux/Flux基础？这可能会结束使用React Hot Reloading和Time travel的可能性吗？

你应该毫不留情地回答,我可能做了一堆丑陋的事情,但我正在学习React/Redux.

我有兴趣使用REST 的HATEOAS原则来减少SPA应用程序中的业务逻辑.在React特定的背景下,我想知道是否存在使这种做法变得不切实际的挑战,如果没有,那么有什么好的策略可以遵循？

使用HATEOAS从UI中删除业务逻辑的概念示例:

• 将有效的银行帐户操作委派给REST服务
• 将基于角色的访问控制委派给REST服务

我只发现一个链接表明React/Flux与HATEOAS策略不兼容,并且其他地方没有有意义的讨论.在React/Flux应用程序中它真的不可行吗？SO帖子没有得到足够的重视.有没有人有最喜欢或推荐的方法来取得成功(有或没有Flux或Redux)？

有人给出了一个在Angular上下文中利用HATEOAS的相当详细的例子.我正在为React寻找类似的东西.

就个人而言,我正在描绘rel超媒体链接中的标签,控制渲染哪些JSX组件(条件JSX).对于真实世界的React应用来说,这是天真的吗？也许有条件地渲染的React组件太粗糙,无法以这种方式使用？

我假设超媒体链接由HAL实现提供,或者符合ATOM提要约定(RFC4287).

Blazor 中有哪些库/技术可用于 WebAssembly (wasm) 的状态管理。

很高兴了解不同方法的优缺点。