问题标签 [react-redux]

假设您正在制作一个显示电影数据的应用程序，这些数据是您从服务器以这种格式获取的：

不同的数组通过 id 相互关联。换句话说，电影中的对象看起来像这样：

cast 数组中的每个 id 都是对 actor 数组中某个演员的引用。

您将数据按原样放在 redux 存储中，但不同的组件需要以不同的任意方式使用它。例如，一个组件需要列出杰克·尼科尔森在 1970 年代出演的所有电影，即使年份数组没有直接链接到演员。它只是链接到电影，而电影本身又链接到演员。所以在组件可以渲染之前，它需要运行一堆数据转换。

另一个组件列出了马丁·斯科塞斯和罗伯特·迪尼罗合作的所有时间，另一个列出了标题中带有“火”的所有电影，另一个列出了汤姆·汉克斯在 1990 年至 2000 年之间拍摄的所有电影……

产品经理计划随时添加和删除这样的任意显示，因此在应用程序中将使用日期，就像可查询的数据库一样。特定查询将经常更改。

我们还假设必须在客户端上完成转换。服务器的唯一能力是以上面的规范化形式发送数据。

构建这样的应用程序以使其具有可扩展性和易于更新的最佳方式是什么？我可以想到几种方法：

1. 在 reducer 中进行所有映射。缺点是它们的减速器会变得臃肿。他们将需要以大量不同的形式缓存相同的数据。

2. 将原始的、标准化的数据存储在 reducer 中，并使用控制器组件（高级组件）将其映射到其孩子需要的任何形式。我对此并不疯狂，因为它在视图中散布着业务逻辑。当然，这假设您将高级组件视为视图。

3. 在 connect、mapStateToProps 函数中映射。每个高级组件都会连接到 store，但在它得到它的 props 之前，它们会通过连接转换为适当的格式。

4. ？？？

我有一个由 react-router (path="profile/:username") 加载的 Profile 组件，该组件本身如下所示：

fetchUser 操作看起来像这样（redux-api-middleware）：

我添加 componentWillReceiveProps 函数的原因是在 URL 更改为另一个 :username 时做出反应并加载该用户的个人资料信息。乍一看，一切似乎都正常，但后来我注意到在调试时 componentWillReceiveProps 函数在无限循环中被调用，我不知道为什么。如果我删除 componentWillReceiveProps 则配置文件不会使用新用户名更新，但我没有循环问题。有任何想法吗？

在减速器函数中是否使用 Spread 运算符或 Object.assign 将更改应用于目标对象，我有点困惑。

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

在这两种方法中哪个是合适的方法

我将 React 与 react-router 和 react-redux 一起使用。当一个组件挂载时，我会派发从数据库中获取数据。我的父组件有这个

我的子组件如下所示：

还有我的 TopComp 更新，点击它的父组件上的链接。它接收不同的 params.id 并为每个参数获取数据。

仅使用 React 管理状态

我知道，如果您仅使用 React 创建应用程序，您最终将在您创建的不同 React 组件中管理所有状态。

使用 React 和 Redux 管理状态

如果您决定将 Redux 与 React 结合使用，则可以将每个 React 组件的所有状态移动到整个 Redux 应用程序状态。然后，每个需要 Redux 应用程序状态切片的组件都可以通过 React-Redux 的connect函数挂钩到状态。

问题

这是否意味着您不再需要编写任何处理 React state（即this.setState）的 React 组件，因为 React-Redux通过将数据传递到组件中connect来使用具有 Redux 状态的 React 组件？containerprops

Preface: I'm a rails developer that is familiar enough with Javascript to write basic things but my overall understanding of the frameworks in question react + react-redux + redux-form may be insufficient. I'm still working on that.

Task to Accomplish: I'm trying to implement a multiple page form using redux-form. I have the multiple page form working. I now need to post all three pages of the wizard's values in one XHR request.

The Problem: I'm following the example of the multipage Wizard form in the redux-form documentation: http://redux-form.com/4.2.0/#/examples/wizard?_k=h898k7

However, I don't seem to understand where an XHR request should be handled. This may be a fundamental misunderstanding of react and react-redux. I see they have an onSubmit function passed to each wizard page from WizardForm.js parent component, but I don't think I understand where WizardForm.js is getting that onSubmit function nor what the shape of that function would be if the goal is to accomplish an XHR PUT request on WizardFormThirdPage.js.

Also, though the goal of the form submission isn't (yet) to change any of the redux store's state, would it be rational to make an action that does the XHR when something is dispatched like 'SUBMIT_FORM'?

我的 React 无法在 Internet Explorer 10 上加载（与 Chrome 和 FF 一起正常工作）。

我收到错误：

（翻译）

trySubscribe 函数在 react-redux ( src/components/connect.js ) 中：

所以似乎 this.store 是未定义的，但我不知道为什么？

我正在创建我的第一个 React-Redux 应用程序。我正在使用yo generator-redux并关注这个repo和官方文档。我已经渲染了 de SignIn Presentational Component，它工作正常，如果输入为空白，则显示错误。问题在于调度。我使用 Thunk 中间件，但 repo 没有。

我曾经console.log()探索过我的代码的工作深度，我发现正在调用组件操作，AJAX 请求（使用 axios）工作正常，但.then()（我认为）不起作用但不会引发错误。

这是我的代码：

行动

actions/UsersActions.js

零件

components/SignInForm.js

容器

containers/SignInFormContainer.js

展示/页面/视图

presentational/SignIn.js

减速机

reducres/UserReducer.js

reducers/index.js

店铺

index.js

我希望你能帮帮我！我不知道是否有问题，因为我使用的是 Thunk 而示例没有，或者是否缺少某些内容。

感谢你们！

如何在 redux 中维护 store 的状态？登录时，用户的详细信息以{user:Object}. 但是在刷新页面时，状态会丢失并等于初始值。我该如何处理？是否有必要将状态存储在 localStorage 中？有替代方案吗？

我在将键控元素发送到子元素时遇到问题，该子元素将按键过滤这些子元素。这个想法是通过键将处理程序映射到子项，处理程序将切换键以进行过滤。我知道使用索引作为键是一种反模式，但是这里发生了什么？我总是得到错误"Warning: Each child in an array or iterator should have a unique "key" prop.

render: function() { return ( <Frame> <Frame> <Navbar isLoggedIn={true} handlers={this.handlers}> {this.props.children.map(function(child, i) { return ( <button onClick={this.handlers[i]}>{child.props.text || 'Checkout item ' + i}</button> ) }.bind(this))} </Navbar> </Frame> {this.props.isLoading ? <Loading /> : <Filter filter={function(child) { return String(this.props.displayed) === child.key; }.bind(this)}> {this.props.children.map(function(child, i) { return (<div key={i}><child /></div>) })} </Filter>} </Frame> ) }

function Filter (props) { return ( <div> {Array.isArray(props) ? props.children.filter(function(child) { return props.filter(child); }) : props.children} </div> ) };