标签: redux

我正在使用React学习Redux并且偶然发现了这段代码.我不确定它是否特定于Redux,但我在其中一个示例中看到了以下代码片段.

@connect((state) => {
  return {
    key: state.a.b
  };
})

虽然功能connect非常简单,但我@之前并不理解connect.如果我没错,它甚至不是JavaScript运算符.

有人可以解释一下这是什么,为什么用它？

更新:

事实上,react-redux它的一部分用于将React组件连接到Redux存储.

作为一个注释:我已经阅读了Redux的文档(Baobab也是如此),并且我已经做了很多Google搜索和测试.

为什么Redux应用程序只有一个商店？

我理解单店设置与多店设置的优缺点(在这个主题上有很多关于SO的问答).

IMO,这个架构决策属于应用程序开发人员根据他们的项目需求.那么为什么Redux如此强烈建议,几乎到了强制性的声音(虽然没有什么能阻止我们制作多个商店)？

编辑:转换为单店后的反馈

在使用redux处理许多人认为复杂的SPA之后几个月,我可以说单一商店结构一直是一种纯粹的乐趣.

有几点可能有助于其他人理解为什么单个商店与许多商店在很多很多用例中都是一个没有实际意义的问题:

• 它是可靠的:我们使用选择器来挖掘应用程序状态并获取与上下文相关的信息.我们知道所有需要的数据都在一个商店中.它避免了对状态问题可能存在的所有质疑.
• 速度很快:我们的商店目前有近100个减速机,如果不是更多的话.即使在那个数量上,只有少数减速器处理任何给定调度的数据,其他减少器只返回先前的状态.一个巨大/复杂的商店(减速器的数量)缓慢的论点几乎没有实际意义.至少我们没有看到任何性能问题.
• 调试友好:虽然这是使用redux作为一个整体的最有说服力的论据,但它也适用于单店和多店.在构建应用程序时,您必然会在进程中出现状态错误(程序员错误),这是正常的.PITA是那些错误需要几个小时才能调试的时候.多亏了单店(和redux-logger),我们在任何特定的州问题上都没有花费超过几分钟的时间.

一些指示

构建redux商店的真正挑战在于决定如何构建它.首先,因为在路上改变结构只是一个主要的痛苦.其次,因为它在很大程度上决定了您将如何使用,并查询您的应用数据的任何过程.关于如何构建商店有很多建议.在我们的例子中,我们发现以下是理想的:

{
  apis: {     // data from various services
    api1: {},
    api2: {},
    ...
  }, 
  components: {} // UI state data for each widget, component, you name it 
  session: {} // session-specific information
}

希望这些反馈能够帮助他人.

编辑2 - 有用的商店工具

对于那些一直想知道如何"轻松"管理单个商店的人来说,这可能会很快变得复杂.有一些工具可以帮助隔离商店的结构依赖性/逻辑.

有Normalizr其标准化基础上的模式数据.然后它提供了一个界面来处理数据并获取数据的其他部分id,就像字典一样.

当时不知道Normalizr,我沿着同样的路线建造了一些东西.relational-json接受一个模式,并返回一个基于表的接口(有点像数据库).relational-json的优点是您的数据结构动态地引用数据的其他部分(实际上,您可以在任何方向上遍历数据,就像普通的JS对象一样).它不像Normalizr那样成熟,但我已经在生产中成功使用它几个月了.

我试图理解react-redux的连接方法,以及它作为参数所采用的函数.特别是mapStateToProps().

我理解它的方式,返回值mapStateToProps将是一个从状态派生的对象(因为它存在于商店中),其键将作为道具传递给目标组件(应用组件连接).

这意味着目标组件所使用的状态与存储在商店中的状态可能具有完全不同的结构.

问:这样可以吗？
问:这是预期的吗？
问:这是反模式吗？

我要迁移到Redux.

我的应用程序包含很多部分(页面,组件),因此我想创建许多reducer.Redux示例显示我应该使用combineReducers()生成一个reducer.

另外据我所知,Redux应用程序应该有一个商店,并在应用程序启动后创建它.在创建商店时,我应该通过我的组合减速机.如果应用程序不是太大,这是有道理的.

但是,如果我构建多个JavaScript包怎么办？例如,每个应用程序页面都有自己的包.我认为在这种情况下,一个联合减速器并不好.我查看了Redux的来源,并找到了replaceReducer()功能.这似乎是我想要的.

replaceReducer()当我在应用程序的各个部分之间移动时,我可以为我的应用程序的每个部分创建组合的reducer .

这是一个好方法吗？

是否可以在减速机本身发送动作？我有一个进度条和一个音频元素.目标是在音频元素中更新时间时更新进度条.但是我不知道将ontimeupdate事件处理程序放在何处,或者如何在ontimeupdate的回调中调度一个动作来更新进度条.这是我的代码:

//reducer

const initialState = {
    audioElement: new AudioElement('test.mp3'),
    progress: 0.0
}

initialState.audioElement.audio.ontimeupdate = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};


const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

花了一些时间学习React后,我理解了创建组件的两个主要范例之间的区别

我的问题是我什么时候应该使用哪一个？为什么？一个在另一个上有什么好处/权衡？

ES6/7课程:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

功能:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

只要没有任何状态可以被该组件操纵,我就会想到功能......但是这样吗？

我猜我是否使用任何生命周期方法,最好使用基于类的组件.

@connect当我试图在反应组件中访问商店时,效果很好.但是我应该如何在其他一些代码中访问它.例如:假设我想使用授权令牌来创建可以在我的应用程序中全局使用的axios实例,那么最好的方法是什么？

这是我的 api.js

// tooling modules
import axios from 'axios'

// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'

export default api

现在我想从我的商店访问一个数据点,如果我试图在反应组件中使用它来获取它,那么这就是 @connect

// connect to store
@connect((store) => {
  return {
    auth: store.auth
  }
})
export default class App extends Component {
  componentWillMount() {
    // this is how I would get it in my react component
    console.log(this.props.auth.tokens.authorization_token) 
  }
  render() {...}
}

那里有任何见解或工作流程模式吗？

React 16.3.0已经发布,Context API不再是实验性功能.Dan Abramov(Redux的创建者)在这里写了一篇很好的评论,但是当Context仍然是一个实验性功能已经2年了.

我的问题是,在您的观点/经验中何时应该使用React Context而不是React Redux,反之亦然？

我想将状态树的某些部分保存到localStorage.适当的地方是什么？减速器还是动作？

我有一个用于创建,读取,更新和删除的表单.我创建了3个具有相同形式的组件,但我传递了不同的道具.我有CreateForm.js,ViewForm.js(只读取删除按钮)和UpdateForm.js.

我曾经使用PHP,所以我总是以一种形式做这些.

我使用React和Redux来管理商店.

当我在CreateForm组件中时,我传递给我的子组件,这个props createForm={true}不会用值填充输入,也不会禁用它们.在我的ViewForm组件中,我传递了这个道具readonly="readonly".

我有一个textarea的另一个问题,它充满了一个值,并且不可更新.具有值的react textarea是readonly但需要更新

只有一个组件可以处理这些不同的表单状态,最好的结构是什么？

你有任何建议,教程,视频,演示分享？