小编Jor*_*nev的帖子

如何处理Redux中的关系数据?

我正在创建的应用程序有很多实体和关系(数据库是关系).为了得到一个想法,有25个以上的实体,它们之间有任何类型的关系(一对多,多对多).

该应用程序是基于React + Redux的.为了从商店获取数据,我们使用了Reselect库.

我面临的问题是当我试图从商店获得一个与其关系的实体时.

为了更好地解释这个问题,我创建了一个简单的演示应用程序,它具有类似的架构.我将重点介绍最重要的代码库.最后,我将包括一个片段(小提琴),以便与它一起玩.

演示应用

商业逻辑

我们有书籍和作者.一本书有一位作者.一位作者有很多书.尽可能简单.

const authors = [{
  id: 1,
  name: 'Jordan Enev',
  books: [1]
}];

const books = [{
  id: 1,
  name: 'Book 1',
  category: 'Programming',
  authorId: 1
}];
Run Code Online (Sandbox Code Playgroud)

Redux商店

商店采用扁平结构,符合Redux最佳实践 - 规范状态.

这是书籍和作者商店的初始状态:

const initialState = {
  // Keep entities, by id:
  // { 1: { name: '' } }
  byIds: {},
  // Keep entities ids
  allIds:[]
};
Run Code Online (Sandbox Code Playgroud)

组件

组件组织为容器和演示文稿.

<App /> 组件充当Container(获取所有需要的数据):

const mapStateToProps = state => ({
  books: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux react-redux reselect

23
推荐指数
3
解决办法
4193
查看次数

如何在React中将二进制数据显示为图像?

我从Nodejs服务器收到一个bindata,现在我需要显示一个图像.

我怎样才能做到这一点?有没有什么方法可以将bindata转换为JPEG或任何其他格式?或者是否可以在服务器中转换它然后发送该图像作出反应?

这是我试图item.Image.data.data用图像标记显示二进制数据()的方法:

<img src={item.Image.data.data} />
Run Code Online (Sandbox Code Playgroud)

这是我详细的反应代码片段:

componentDidMount(){
  let self = this;
  axios.get('http://localhost:8080/list')
    .then(function(data) {
      console.log(data);
      self.setState({post:data.data});
    });
}

<ul className="w3-ul w3-card-4 w3-light-grey">
  { this.state.post.map((item, index) => {
    return (
      <Link  to="/displaylist" style={{ textDecoration: 'none' }} key={index}>
        <li className=" w3-hover-green w3-padding-16" onClick={this.handleClick(item.Id)}>
          <img src={item.Image.data.data} className="w3-left w3-circle w3-margin-right" width="60px" height="40px" />
          <span>{item.Firstname}</span><br/><br/>
        </li>
      </Link>
      )}
  )}
</ul>
Run Code Online (Sandbox Code Playgroud)

这是我的nodejs代码片段:

server.get('/list', function(req, res) {
    databaseInterface.listStudent(function(err, students) {
      var myJSON = students;

      res.json(myJSON);
      // You should see the newly saved student here …
Run Code Online (Sandbox Code Playgroud)

javascript node.js reactjs

15
推荐指数
3
解决办法
4万
查看次数

在 Symfony 中使用 Doctrine 和 PostgreSQL 有什么陷阱吗?

我们正在启动一个新的 Symfony 项目,并决定(基于性能、负载测试)使用 Doctrine ORM 和 PostgreSQL 来代替 MySQL / MariaDB。

MySQL 是 Symfony 项目( [symfony][mysql][symfony][postgresql] )更首选的数据库选择,因此选择 PostgreSQL 是一个罕见的决定,也许有一些我们必须考虑的陷阱。

问题是 Symfony Doctrine ORM 集成是否像 MySQL 一样支持 PostgreSQL?

php mysql postgresql symfony doctrine-orm

5
推荐指数
0
解决办法
645
查看次数

有效地渲染大量Redux表单字段?

我每天都有一张员工表和他们的每月工作时间。在这里,我们可以批量更新所有员工工时值。

本月的一个简单数学:30天x 50名员工将产生1500个安装的Redux表单字段。

每次挂载Field时,Redux Form都会调度一个操作以在Redux存储中注册Field。因此,调度了1500个事件。

使用Chrome-> Performance工具进行调试,我发现从安装到分派到呈现Fields的整个过程大约需要4秒钟:

绩效成本

上面的性能得分基于我使用React,Redux,Redux Form和Reselect创建的以下简单工作示例:

/* ----------------- SAMPLE DATA GENERATION - START ----------------- */
const generateEmployees = length =>
  Array.from({ length }, (v, k) => ({
    id: k + 1,
    name: `Emp ${k + 1}`,
    hours: [8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8]
  }))

const employees = generateEmployees(50)
/* ----------------- SAMPLE DATA GENERATION - END ------------------- */

/* --------------------- INITIALIZATION - START --------------------- */
const { reduxForm, Field, reducer: formReducer } = ReduxForm
const { createStore, combineReducers, applyMiddleware } = Redux
const …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux redux-form react-redux

5
推荐指数
1
解决办法
440
查看次数

反应调试模式和普通模式之间的本机不同行为

嗨,我有一个非常复杂的问题。所以我在github上为这个问题创建了一个新的仓库。因此,您可以克隆它并查看问题所在。

https://github.com/guitar9/hafas-client-example

我在这个项目中使用https://github.com/public-transport/hafas-client来获取火车站和火车站的信息。

client.journeys(münchenHbf, münchenPassing)
.then((response)=>{
  console.log('===============response=====================');
  console.log(response);
  console.log('====================================');
})
.catch(console.error)
Run Code Online (Sandbox Code Playgroud)

请求在

node_modules/hafas-client/lib/request
Run Code Online (Sandbox Code Playgroud)

问题是在调试模式下一切正常(摇动电话并启动远程JS调试),但是当我停止JS调试时,出现错误“ PARSE”。

所以我在request.js中查找并以调试模式而不是调试模式注销了请求和响应。

请求调试模式

{
    "method": "post",
    "body": "{\"lang\":\"en\",\"svcReqL\":[{\"cfg\":{\"polyEnc\":\"GPA\"},\"meth\":\"TripSearch\",\"req\":{\"outDate\":\"20180614\",\"outTime\":\"174837\",\"ctxScr\":null,\"getPasslist\":false,\"maxChg\":5,\"minChgTime\":0,\"depLocL\":[{\"lid\":\"A=1@L=008000261@\"}],\"viaLocL\":null,\"arrLocL\":[{\"lid\":\"A=1@L=008004158@\"}],\"jnyFltrL\":[{\"type\":\"PROD\",\"mode\":\"INC\",\"value\":\"1023\"},{\"type\":\"META\",\"mode\":\"INC\",\"meta\":\"notBarrierfree\"}],\"getTariff\":false,\"outFrwd\":true,\"getPT\":true,\"getIV\":false,\"getPolyline\":false,\"numF\":5,\"trfReq\":{\"jnyCl\":2,\"tvlrProf\":[{\"type\":\"E\",\"redtnCard\":null}],\"cType\":\"PK\"}}}],\"client\":{\"id\":\"DB\",\"v\":\"16040000\",\"type\":\"IPH\",\"name\":\"DB Navigator\"},\"ext\":\"DB.R15.12.a\",\"ver\":\"1.16\",\"auth\":{\"type\":\"AID\",\"aid\":\"n91dB8Z77MLdoR0K\"}}",
    "headers": {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "user-agent": "https://github.com/public-transport/hafas-client"
    },
    "query": {
        "checksum": "6af3b74db20e14c7f94012e3de55dce6"
    }
}
Run Code Online (Sandbox Code Playgroud)

响应调试模式

所有信息。一切都好。

请求未处于调试模式

{
    "method": "post",
    "body": "{\"lang\":\"en\",\"svcReqL\":[{\"cfg\":{\"polyEnc\":\"GPA\"},\"meth\":\"TripSearch\",\"req\":{\"outDate\":\"Invalid DateTime\",\"outTime\":\"Invalid DateTime\",\"ctxScr\":null,\"getPasslist\":false,\"maxChg\":5,\"minChgTime\":0,\"depLocL\":[{\"lid\":\"A=1@L=008000261@\"}],\"viaLocL\":null,\"arrLocL\":[{\"lid\":\"A=1@L=008004158@\"}],\"jnyFltrL\":[{\"type\":\"PROD\",\"mode\":\"INC\",\"value\":\"1023\"},{\"type\":\"META\",\"mode\":\"INC\",\"meta\":\"notBarrierfree\"}],\"getTariff\":false,\"outFrwd\":true,\"getPT\":true,\"getIV\":false,\"getPolyline\":false,\"numF\":5,\"trfReq\":{\"jnyCl\":2,\"tvlrProf\":[{\"type\":\"E\",\"redtnCard\":null}],\"cType\":\"PK\"}}}],\"client\":{\"id\":\"DB\",\"v\":\"16040000\",\"type\":\"IPH\",\"name\":\"DB Navigator\"},\"ext\":\"DB.R15.12.a\",\"ver\":\"1.16\",\"auth\":{\"type\":\"AID\",\"aid\":\"n91dB8Z77MLdoR0K\"}}",
    "headers": {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "user-agent": "https://github.com/public-transport/hafas-client"
    },
    "query": {
        "checksum": "0d8186da7b06f9cc094075a2a6e21b00"
    }
}
Run Code Online (Sandbox Code Playgroud)

响应不在调试模式下

{
    "ver": "1.16",
    "ext": "DB.R15.12.a",
    "lang": "eng",
    "id": "",
    "err": "PARSE",
    "svcResL": [] …
Run Code Online (Sandbox Code Playgroud)

javascript android request reactjs react-native

3
推荐指数
1
解决办法
1766
查看次数