RequireJS on Dapeng Zhang

抛弃Redux，迎接React的hooks和context（二）

Thu, 10 Jul 2025 10:57:55 +0000

继续【抛弃Redux，迎接React的hooks和context（一）】文章继续介绍一些新的东西

如果你还不知道什么情况的话，建议回到前面的文章看下，做下热身了解。

样式

前面的文章我们没有做关于样式太多的操作，这里我们简单的加一些样式，使得我们的应用能够更加具有导航性

添加下面的样式到文件index.css

.episode-layout {
 display: flex;
 flex-wrap: wrap;
 min-width: 100vh;
}

.episode-box {
 padding: 0.5rem;
}

.header {
 align-items: center; 
 background: white;
 border-bottom: 1px solid black;
 display: flex;
 justify-content: space-between;
 padding: .5rem;
 position: sticky;
 top: 0;
}
.header * {
 margin: 0;
}

在index.js文件中StoreProvider下面加入下面的代码

import './index.css';

在App.jsx文件中，给<section>标签添加className属性，让className等于film-layout
在<section>标签中的state.films.map里面的<section>添加className，让className等于film-box
将最后的那个</div>，在</React.Fragment>标签上面的，移到<p>标签下面。
最后给<div>标签添加属性className，让className等于header

最后App.jsx的代码如下

import React from 'react';
import { Store } from './Store';

function App() {
 const { state, dispatch } = React.useContext(Store);

 const fetchDataAction = async () => {
 const data = await fetch('https://api.tvmaze.com/singlesearch/shows?q=rick-&-morty&embed=episodes');

 const dataJson = await data.json();

 return dispatch({
 type: 'FETCH_DATA',
 payload: dataJson._embedded.episodes
 });
 }

 React.useEffect(() => {
 state.films.length === 0 && fetchDataAction();
 });

 return (
 <React.Fragment>
 {console.log(state)}
 <div className="header">
 <h1>Example</h1>
 <p>Favourite</p>
 </div>
 <section className="film-layout">
 {
 state.films.map(f => {
 return (
 <section key={f.id} className="film-box">
 <img
 src={f.image ? f.image.medium : ''} 
 alt={`Year and Date ${f.name}`}
 />
 <div>
 {f.name}
 </div>
 <section>
 <div>
 Season: {f.season} Number: {f.number}
 </div>
 </section>
 </section>
 )
 })
 }
 </section>
 </React.Fragment>
 );
}

export default App;

让我们再次运行npm start，如果已经启动则不需要这个操作，会自动刷新

添加功能

仍然是在App.jsx文件中，在包含Season和Number的</div>标签下面添加下面的代码

<button type='button' onClick={() => toggleCreatorAction(f)}>ADD</button>

在fetchDataAction函数下面添加toggleCreatorAction函数，其代码如下

const toggleCreatorAction = film => {
 dispatch({
 type: 'CREATOR_ADD',
 payload: film
 })
}

正如这里面写的，toggleCreatorAction函数返回一个dispatch，这个dispatch发送一个creator对象到store，你也许已经猜到了这个函数的功能。

打开Store.js，在reducer人中添加下面这个case在default上面

case 'CREATOR_ADD':
 return {
 ...state,
 creators: [...state.creators, action.payload]
 }

当点击按钮ADD的时候，CREATOR_ADD的case会更新creators数组，并将新的creator对象添加到creators中

打开浏览器查看开发者工具，然后点击ADD按钮将会看到creators更新变化的情况

删除功能

修改toggleCreatorAction函数修改后代码如下

const toggleCreatorAction = film => {
 const filmInCreator = state.creators.includes(film)

 let dispatchObj = {
 type: 'CREATOR_ADD',
 payload: film,
 }

 if (filmInCreator) {
 const filmWithoutCreator = state.creators.filter(creator => creator.id !== film.id)

 dispatchObj = {
 type: 'CREATOR_DEL',
 payload: filmWithoutCreator,
 }
 }

 return dispatch(dispatchObj)
}

filmInCreator用来检查creators中是否已经存在film，如果存在的话则进行删除操作，filmWithoutCreator用来移除存在的film，然后用新的filmWithoutCreator来更新creators数组。

在Store.js中的reducer中添加一个新的case，代码如下

case 'CREATOR_DEL':
 return {
 ...state,
 creators: action.payload
 }

上面的功能完成后，该有的功能都差不多了，但是为了向用户展示，正在发生的事情，我们需要再做一些事情

修改App.jsx，修改header部分，修改后的代码如下

<header>
 <div className="header">
 <h1>Example</h1>
 <p>Favourite</p>
 </div>
 <div>
 Creator(s) {state.creators.length}
 </div>
</header>

修改组件，用下面的代码替换掉ADD

{state.creators.find(creator => creator.id === f.id) ? 'DEL' : 'ADD'}

这段代码使用了 array.find 方法，为了检查film对象的id是否存在于creators数组中，如果存在，则显示DEL

小样式的修改，在<div>{f.name}</div>下面的<section>，给<section>标签添加一个style，代码如下

style={{ display: 'flex', justifyContent: 'space-between' }}

希望一切顺利，你有代码在浏览器中类似如下。

分隔代码

前面做了一些基本逻辑上的实现操作，下面做一些关于代码拆分的操作

创建一个新的文件，叫做FlimList.jsx，其代码如下

import React from 'react';

export default function FilmList(props) {
 const { films, toggleCreatorAction, creators } = props;
}

你可能已经明白我们要做的事情了

在App.jsx文件中，复制state.films.map的代码，然后粘贴到creators文件中。
在FilmList.jsx中将state.films.map替换为return films.map
将state.creators.find替换为creators.find

所有步骤做完后，FilmList.jsx文件中的代码看起来如下

import React from 'react';

export default function FilmList(props) {
 const { films, toggleCreatorAction, creators } = props;

 return films.map(f => {
 return (
 <section key={f.id} className="film-box">
 <img
 src={f.image ? f.image.medium : ''}
 alt={`Year and Date ${f.name}`}
 />
 <div>
 {f.name}
 </div>
 <section style={{ display: 'flex', justifyContent: 'space-between' }}>
 <div>
 Season: {f.season} Number: {f.number}
 </div>
 <button type='button' onClick={() => toggleCreatorAction(f)}>
 {creators.find(creator => creator.id === f.id) ? 'DEL' : 'ADD'}
 </button>
 </section>
 </section>
 )
 })
}

suspense 和 lazy

在App.jsx文件中加入下面的代码

const FilmList = React.lazy(() => import('./FilmList'));

在<React.Suspense>嵌套标签<React.Fragment>
<React.Suspense>标签应该有下面这个属性

**fallback**={<div>Loading...</div>}

移除<section className="film-layout">...</section>部分的代码，并用<FilmList {...props} />替换
添加下面的代码在返回组件的上面

const props = {
 films: state.films,
 toggleCreatorAction,
 creators: state.creators,
};

以上所有操作做完之后，保存代码并刷新浏览器应该会正常工作，并且在打开的时候会有一个’Loading…‘状态

参考自:https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-2-838fd20e6739

抛弃Redux，迎接React的hooks和context（一）

Thu, 10 Jul 2025 10:57:52 +0000

如果你使用React很长时间，Redux应该听说过。Redux是非常酷的，它是一种获取单独组件来改变和从主应用程序store中提取数据的方法，但是它不是非常容易入手的，尤其是新手。

有很多概念性的东西，比如reducers, actions, action creators，并且有一些方法，比如mapDispatchToProps和mapStateToProps，以及需要根据常规原因创建的一堆文件和文件夹。为了分享和改编数据需要做大量的工作。

随着Context API和hooks的引入，我们可以在我们的React应用程序中重新创建Redux，而无需实际安装redux和react-redux，本篇文章将演示下如何操作。

配置

前提确保已经安装Nodejs(我使用的版本是v10.15.0)，然后使用create-react-app初始化一个app:

npx create-react-app no-redux-app

这个根据具体网络情况需要花一些时间，确实真的要好长时间

一旦初始化结束后，在no-redux-app这个目录下通过使用命令npm start来启动项目，会自动打开浏览器，并且会看到类如下图的页面

ctrl + c停止运行
打开```package.json````文件，查看react和react-dom的版本号，如果是在16.7.0以上则可以使用hooks，如果不是请运行下面命令安装最新版本

$ npm i [email protected] [email protected]

为了保证下面的操作清晰，我们把src下面除了App.js、index.js和index.css文件的其他文件
修改index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx';
import { StoreProvider } from "./Store";

ReactDOM.render(
 <StoreProvider>
 < App / >
 </StoreProvider>
 , document.getElementById('root'));

将App.js重命名为App.jsx，并用下面的代码替换

import React from 'react';

function App() {
 return (
 <React.Fragment>
 <div>
 <h1>Example</h1>
 <p>Favourite</p>
 </div>
 </React.Fragment>
 );
}

export default App;

Redux概念

根据它的文档介绍，Redux能够概括为三个基本概念：stores，actions和reducers

action只有一个事情就是触发state的改变，它通常返回一个带有type和payload的对象

function actionFunc(dispatch) {
 return dispatch({type: 'COMPLETE_TODO', payload: 1}) 
}

这里的dispatch参数告诉操作该对象需要影响的store是什么，因为应用程序可以有多个reducers。这将在以后有意义。

reducer指定store将受操作影响的部分。因为redux存储是不可变的，所以reducer返回一个替换当前store的新store。Reducers通常写为switch语句。

function visibilityFilter(state, action) {
 switch (action.type) {
 case 'SET_VISIBILITY_FILTER':
 return action.payload;
 default:
 return state;
 }
}

store将所有应用程序数据保存在对象树中。Redux有一个store，但Facebook的Flux等其他state管理器可以拥有多个store。

{
 visibilityFilter: 'SHOW_ALL',
 todos: [
 text: 'Consider using Redux',
 completed: true,
 ]
}

应用程序中任何组件的组件都可以访问store，并可以通过触发action来更改store。

下面用React自带的hooks和context实现下这个概念

创建Store

在src目录下面创建一个Store.js文件

在这里，我们将使用react context来创建一个父组件，该组件将为其子组件访问它所拥有的数据。这里暂时不深入研究context，但基本上是有provider - consumer关系。provider拥有所有数据，consumer使用它（有意义）。

添加下面的代码到Store.js文件中

import React from "react";

export const Store = React.createContext();

const initialState = {};

function reducer () {}

export function StoreProvider(props) {}

第3行创建了一个子组件将订阅的context对象。暂时跳过初始化state对象和reducer函数，先看下StoreProvider

添加下面的代码到StoreProvider中

export function StoreProvider(props) {
 return <Store.Provider value='data from store'>{props.children}</Store.Provider>
}

现在修改index.js文件并且从./Store导入StoreProvider

import { StoreProvider } from './Store';

将组件放入到中，添加完的代码看起来类似如下

ReactDOM.render(
 <StoreProvider>
 <App />
 </StoreProvider>,
 document.getElementById('root')
);

在App.jsx中导入Store，代码如下

import { Store } from './Store';

在App函数中加入如下代码

const store = React.useContext(Store);

这里使用了第一个hooks，就是useContext。这将使组件可以访问context提供程序的value属性中的数据。

在<React.Fragment>里面第一行添加{console.log(store)}
启动程序打开浏览器，在开发工具控制台中将会看到```data from store````

如果你没有看到，请确认下你的代码是否跟我的一致

文件结构

代码结构

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StoreProvider } from './Store';

ReactDOM.render(
 <StoreProvider>
 <App />
 </StoreProvider>,
 document.getElementById('root')
);

// Store.js

import React from 'react';

export const Store = React.createContext();

const initialState = {};

function reducer() {}

export function StoreProvider(props) {
 return <Store.Provider value='data from store'>{props.children}</Store.Provider>;
}

// App.jsx

import React from 'react';
import { Store } from './Store';

export default function App() {
 const store = React.useContext(Store);

 return (
 <React.Fragment>
 {console.log(store)}
 <div>
 <h1>Example</h1>
 <p>Favourite</p>
 </div>
 </React.Fragment>
 );
}

创建Reducer

如果看到这里的话，说明前面的实现是你已动手实现了下，并且是没有问题的。下面继续更新代码

Store.js文件中，在initialState中加入下面的代码

const initialState = {
 films: [],
 favourites: [],
};

这是我们的初始store在添加任何新数据之前的样子。

修改reducer函数看起来像这样

function reducer (state, action) {
 switch(action.type) {
 case 'FETCH_DATA':
 return { ...state, films: action.payload };
 default:
 return state;
 }
}

前面看到的reducer函数有两个参数，state - 运行时store中的数据，以及action - 返回的action对象。目前，我们的reducer有一个case ‘FETCH_DATA’，它将用传回的数据替换我们的films数组。如果调用了无效操作，则需要使用default关键字返回状态。

在StoreProvider函数中，添加下面的代码

const [state, dispatch] = React.useReducer(reducer, initialState);
const value = { state, dispatch };

这里遇到了第二个hook，就是useReducer。它需要两个参数reducer和initialState。它返回一个数组，里面分别是state - store里面的数据和dispatch - 我们如何向reducer发送动作（反过来改变我们的state）。我希望这是有意义的。

然后，我们将新状态转换为对象，并将其分配给名为value的变量。基本上价值是相同的

const value = {
 state: state,
 dispatch: dispatch
}

但是可以在Javascript ES6及更高版本中编写更短的内容。

在Store.Provider中用下面的代码替换value='data from store'

value={value}

现在我们可以将state和dispatch传递给子组件。

修改App.jsx文件，将const store = React.useContext(Store)替换为const { state, dispatch } = React.useContext(Store);

现在更新控制台日志中的store以查看状态并查看控制台。

你应该看到它从Store.jsx中提取我们的initialState数据。现在让我们来处理一些数据。

创建Action

我们的redux概念的最后一块。

修改App.jsx文件，再返回组件之前添加一个匿名函数，叫fetchDataAction

const fetchDataAction = async () => {}

我们将使用fetch api使用async/await从tvmazeapi获取数据。

添加新代码到我们的新fetchDataAction函数中

const fetchDataAction = async () => {
 const data = await fetch('https://api.tvmaze.com/singlesearch/shows?q=rick-&-morty&embed=episodes');

 const dataJson = await data.json();

 return dispatch({
 type: 'FETCH_DATA',
 payload: dataJson._embedded.episodes
 });
}

我建议您在浏览器中访问api url并查看数据。episodes列表在_embedded之下。

我们返回dispatch方法，其type和payload的对象作为属性，以便我们的reducer将知道要执行的是什么情况。

我们希望每次页面加载时都运行fetchDataAction，所以让我们将它放在返回组件的上方的useEffect hook中。

React.useEffect(() => {
 state.films.length === 0 && fetchDataAction();
});

上面的代码类似于componentDidMount。基本上应用程序加载，如果state.episodes为空（默认情况下），则运行fetchDataAction。

保存并刷新页面。查看开发工具控制台，您应该看到一些数据。

简而言之，这就是redux模式。某些情况触发了一个动作（在我们的例子中它是一个页面加载），动作在reducer中运行一个case，它反过来更新了store。现在让我们使用这些数据。

修改App.jsx，在<p>Favourite</p>下面加入如下代码

<section>
 {
 state.films.map(f => {
 return (
 <section key={f.id}>
 <img
 src={f.image ? f.image.medium : ''} 
 alt={`Year and Date ${f.name}`}
 />
 <div>
 {f.name}
 </div>
 <section>
 <div>
 Season: {f.season} Number: {f.number}
 </div>
 </section>
 </section>
 )
 })
 }
 </section>

这段代码基本上遍历我们的剧集数组中的对象（在用api填充数据之后），并用这些数据填充dom。随意添加或删除您选择的数据点。

参考自:https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533

使用TypeScript开发React应用(四) - Jest单元测试

Thu, 10 Jul 2025 10:57:39 +0000

继续前面的文章使用TypeScript开发React应用(三)介绍了React+TypeScript应用的搭建中如何创建状态组件

下面继续分享组件的单元测试

用Jest写测试

我们对Hello组件有一定的假设。让我们重申它们是什么：

当我们编写类似的内容时，组件应该渲染为类似<div>Hello Durban!!!</div>的内容。
如果未指定passioniasmLevel，则组件应默认显示一个感叹号。
如果passioniasmLevel为0或负数，则应该抛出错误。

我们可以使用这些要求为我们的组件编写一些测试。

但首先，让我们安装Enzyme。 Enzyme是React生态系统中的常用工具，可以更轻松地编写组件行为方式的测试。默认情况下，我们的应用程序包含一个名为jsdom的库，允许我们模拟DOM并在没有浏览器的情况下测试其运行时行为。 Enzyme类似，但建立在jsdom上，可以更容易地对我们的组件进行某些查询。

让我们将其安装为开发时依赖项。

npm install -D enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer

注意我们安装了包enzyme以及@types/enzyme。 enzyme包是指包含实际运行的JavaScript代码的包，而@types/enzyme是包含声明文件（.d.ts文件）的包，因此TypeScript可以理解如何使用Enzyme。您可以在此处了解有关@types包的更多信息。

我们还必须安装enzyme-adapter-react-16和react-test-renderer。这是enzyme预期安装的东西。

在编写第一个测试之前，我们必须配置Enzyme以使用React 16的适配器。我们将创建一个名为src/setupTests.ts的文件，在运行测试时自动加载，代码示例如下

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

enzyme.configure({
 adapter: new Adapter()
});

现在我们已经设置了enzyme，让我们开始编写测试！让我们创建一个名为src/components/Hello.test.tsx的文件，与之前的Hello.tsx文件相邻。

src/components/Hello.test.tsx

import * as React from 'react';
import * as enzyme from 'enzyme';
import Hello from './Hello';

it('renders the correct text when no enthusiasm level is given', () => {
 const hello = enzyme.shallow(<Hello name='Durban' />);
 expect(hello.find('.greeting').text()).toEqual('Hello Durban!');
});

it('renders the correct text with an explicit enthusiasm of 1', () => {
 const hello = enzyme.shallow(<Hello name='Durban' enthusiasmLevel={1} />);
 expect(hello.find('.greeting').text()).toEqual('Hello Durban!');
});

it('renders the correct text with an explicit enthusiasm of 5', () => {
 const hello = enzyme.shallow(<Hello name='Durban' enthusiasmLevel={5} />);
 expect(hello.find('.greeting').text()).toEqual('Hello Durban!!!!!');
});

it('throws when the enthusiasm level is 0', () => {
 expect(() => {
 enzyme.shallow(<Hello name="Durban" enthusiasmLevel={0} />);
 }).toThrow();
});

it('throws when the enthusiasm level is negative', () => {
 expect(() => {
 enzyme.shallow(<Hello name='Durban' enthusiasmLevel={-1} />);
 }).toThrow();
});

这些测试非常基础，但你应该能够掌握一切。

运行代码

npm run test

即可看到运行通过测试的结果

小提示

如果你在国内的话，建议将test的命令

"test": "react-scripts-ts test --env=jsdom",

改为

"test": "react-scripts-ts test --env=jsdom --watchman=false",

这个原因是因为。默认启动了watchman，watchman是需要连接国外的，如果在国内的话，会因为连接不上导致，看不到测试结果

运行后的结果类似如下

PASS src/App.test.tsx
 PASS src/components/Hello.test.tsx

Test Suites: 2 passed, 2 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 3.68s
Ran all test suites related to changed files.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

未完待续…

RequireJS基础使用配置说明

Mon, 30 Jun 2025 15:15:49 +0000

之前用过一次，后来想起来用，感觉好麻烦，还需要配置，但是感觉从大局考虑还是没必要偷懒的，那就记录一下吧。

requirejs.config({
 baseUrl: '../components',//相对于此配置文件的库路径
 paths:{//路径是相对于上面的baseUrl
 'Bootstrap':'bootstrap/dist/js/bootstrap.min',
 'jquery':'jquery/dist/jquery.min',
 'chat':'../javascripts/chat',
 },
 //exports值，表明这个模块外部调用时的名称
 shim:{//包含了如何加载库和插件
 Bootstrap:{
 deps:[//deps数组，表明该模块的依赖性，
 'jquery',
 "css!bootstrap/dist/css/bootstrap.min"
 ]
 },
 jquery:{
 deps:[
 'css!../stylesheets/style.css'
 ]
 }
 },
 map: {
 '*': {
 'css': 'require-css/css' // or whatever the path to require-css is
 }
 }
});
require(['jquery','Bootstrap','chat'],function($,bootstrap,Chat){
 var chat = new Chat();
 chat.init();
});

几点提示paths的里面的名称不能在shim出现，不然就会变成了变量直接用paths里面的值替换了。

这里的map是为了引入require-css插件，以便可以引入自己需要的css文件。

可以说使用shim非常方便了控制了文件的加载顺序。嘿嘿，对了如果你想处理压缩的话可以参考我的另外一篇文件，搜索Requirejs就可以找到。

优化 RequireJS 项目（合并与压缩）- 优化器（Optimizer）

Mon, 30 Jun 2025 12:01:15 +0000

最近在使用js开发项目，用到了requirejs，到后面会发现好多的js文件要加载，于是找到了优化js的方法，就是使用requirejs自带的Optimizer优化器。

具体操作如下：

前提是你已经安装了nodejs：

0.安装requirejs

sudo cnpm install requirejs -g / cnpm install requirejs -g / npm install requirejs -g /sudo npm install requirejs -g

1.构建一个配置文件(相对于执行文件夹)并包含指定的参数，build.js

2.编写build.js，内容如下（仅供参考）：

({
 appDir: './',
 baseUrl: './',
 dir: './dist',
 modules: [
 {
 name: 'main'
 }
 ],
 fileExclusionRegExp: /^(r|build)\.js$/,
 optimizeCss: 'standard',
 removeCombined: true,
 paths: {
 jquery: 'vendor/jquery/dist/jquery.min',
 director: 'vendor/director/build/director.min',
 highcharts: 'vendor/highcharts/highcharts',
 react: 'vendor/react/react.min',
 reactAddons: 'vendor/react/react-with-addons.min',
 JSXTransformer: 'vendor/react/JSXTransformer',
 cookieStorage: 'vendor/cookie-storage/dist/cookie-storage',
 json2: 'vendor/json/json2',
 xdate: 'vendor/xdate/src/xdate',
 moment: 'vendor/moment/min/moment.min',
 jPages: 'vendor/jPages/js/jPages',
 numberFormat: 'vendor/number-format.js/lib/format.min',
 bootstrap:'vendor/bootstrap/dist/js/bootstrap.min',
 datetimepicker:'vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker',
 datetimepickerLanguage:'vendor/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN',
 fancybox:'vendor/fancybox/source/jquery.fancybox.pack',
 async:'vendor/async/lib/async'
 },
 shim: {
 'highcharts': {
 'deps': ['jquery'],
 'exports': 'Highcharts' // Still gotta make this available //使用全局的Highcharts做为模块名称
 },
 'datetimepickerLanguage':{//因datetimepickerLanguage依赖datetimepicker,所以次代码是优先加载datetimepicker
 'deps':['datetimepicker']
 },
 'datetimepicker':{
 'deps':['css!vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min']
 },
 'bootstrap':{
 'deps':['jquery']
 },
 'fancybox':{
 'deps':[
 'jquery',
 'css!vendor/fancybox/source/jquery.fancybox.css'
 ]
 },
 'async':{
 'deps':[
 'vendor/async/deps/nodeunit',
 'css!vendor/async/deps/nodeunit.css'
 ]
 }
 },
 map: {
 '*': {
 'css': 'vendor/require-css/css'
 }
 }
})

3.执行命令

r.js -o build.js