小编Moh*_*mad的帖子

我可以在 redux 状态下传递简单数组吗?

我开始学习更好的redux+reactjs

例如,我有一个新闻或列表缩减程序,它应该返回一个包含新闻项的数组:

const list = [
    {id: 1, title: 'One'},
    {id: 2, title: 'Two'},
    {id: 3, title: 'Three'}
]

export function newsReducer(state = [], action) {
    switch (action.type) {
        case 'GET_NEWS':
            return list
        default:
            return state
    }
}
Run Code Online (Sandbox Code Playgroud)

这段代码工作正常,但在其他文章中我看到它们以 [...state, ...] 和不可变格式传递参数...

那么我可以简单地传递参数还是应该以不可变的格式传递?

谢谢

javascript reactjs redux react-redux

7
推荐指数
1
解决办法
1万
查看次数

How can I return the fetch API results form a function?

I want to return fetch API result from a function. but I get undefined and that function doesn't return me fetched data :

function func() {
    fetch('https://randomuser.me/api/?results=10')
    .then(response => response.json())
    .then(json => (json.results))
}

let users = func()

console.log(users);
Run Code Online (Sandbox Code Playgroud)

javascript api fetch

7
推荐指数
2
解决办法
1万
查看次数

如何将 react-loadable 与 react-router 一起使用?

我正在尝试实现一个有 10-15 页的应用程序。这适用于 react-router 很好,但我应该使用 react-loadable 来获得 Spinner 和加载效果......

但是如何在 loadable 中导入路由器组件?

我应该为每个组件创建一个 const 变量吗?

像这样 :

const Home = Loadable({
    loader: () => import('./Home'),
    loading: Loading,
});

const News = Loadable({
    loader: () => import('./News'),
    loading: Loading,
});

const Gallery = Loadable({
    loader: () => import('./Gallery'),
    loading: Loading,
});

class App extends React.Component {
    render() {
        return (
          <Router>
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />
              <Route path="/gallery" component={Gallery} />
          </Router>
        )
    }
}
Run Code Online (Sandbox Code Playgroud)

还是可以用其他技巧?

javascript reactjs react-loadable

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

如何使用 ReactJS 实现真正的部分更新?

我有一个工作面试,招聘人员问我“处理部分更新和管理应用程序大小”

例如,他解释并展示了一个大小为 8MB 的 SPA,他说这并不理想和完美!?!?

他说我们应该用不同的方法管理应用程序的大小!?

为了测试,在面试结束后,我使用 google chrome DevTools 检查了linkedin 网站。在任何请求之后,我看到响应谁是 html 网页(Html、Css、JS)并且显然在每个请求之后将 html 响应附加到页面谁是控制 SPA 大小的想法!

所以我有一个问题,默认情况下,在 create-react-app 包中,我们有 webpack 来创建 web 模块,并将所有组件加载到一个 bundle.js 中,这个 js 文件对于 40 个或更多组件来说会很重。也许 10MB 或更多...

如何使用完美准确的部分更新方法实现真实且优化的 SPA 结构?

不幸的是我只懂一点英语,如果我写错了,请原谅我:-) ;-)

谢谢

javascript performance single-page-application reactjs

4
推荐指数
1
解决办法
1110
查看次数

我应该在 ReactJs 应用程序中测试什么?

我开始更好地学习 TDD 并且我正在学习很多文章......

例如在一篇文章中我看到了这个测试代码:

import React from 'react';
import {shallow} from 'enzyme';
import ProductList from './ProductList';

it('should render a list of products as an unordered list', () => {
  const mockProducts = [
    {id: 1, name: 'Mock Product 1', brand: 'MockBrandA'},
    {id: 2, name: 'Mock Product 2', brand: 'MockBrandB'},
    {id: 3, name: 'Mock Product 3', brand: 'MockBrandC'},
  ];
  const wrapper = shallow(<ProductList products={mockProducts}/>);
  expect(wrapper.find('li').length).toEqual(mockProducts.length);
  // 3
});
Run Code Online (Sandbox Code Playgroud)

这是一个测试 ul/li 列表组件的简单代码,它将返回 3 ,因为我们在 mockProducts 数组中有 3 个项目。

所以我真的很困惑!!!

真的为什么我们要检查这段代码?!

每次编辑后程序员都会在浏览器中检查结果,那么我们为什么要编写这个测试并且它是必不可少的?!

例如,如果我写了这段代码,当我保存代码时,我会在浏览器中检查结果,我会查看结果,我知道这没问题,这没有错误,那么为什么我还要为简单的组件编写测试代码? …

unit-testing mocha.js chai reactjs jestjs

0
推荐指数
1
解决办法
398
查看次数