React 和 Redux 是目前最流行的前端框架和状态管理库之一，它们可以协同工作以构建高度可维护和可扩展的应用程序。本文将介绍 React 和 Redux 配合使用的最佳实践，包括如何组织代码、如何处理异步操作以及如何测试代码。
组织代码
在 React 和 Redux 应用程序中，代码的组织非常重要。以下是一些最佳实践：
1. 按功能组织代码
将代码按功能组织可以使代码更易于维护和扩展。例如，可以将所有与用户身份验证相关的代码放在一个名为“auth”的文件夹中。
2. 将组件和 Redux 分开
组件应该专注于渲染 UI 和处理用户操作，而 Redux 应该专注于管理应用程序的状态。因此，应该将组件和 Redux 分开，以便更容易地测试和维护代码。
3. 使用容器组件
容器组件是连接 React 组件和 Redux 的桥梁。它们负责从 Redux store 中获取数据并将其传递给子组件。容器组件还可以将动作分派给 Redux store。因此，应该使用容器组件来连接组件和 Redux。
处理异步操作
在 React 和 Redux 应用程序中，异步操作是非常常见的。以下是一些最佳实践：
1. 使用 Redux 中间件
Redux 中间件可以帮助处理异步操作。例如，redux-thunk 可以让动作创建器返回函数而不是对象，从而可以在动作中执行异步操作。redux-saga 可以让您使用生成器函数来处理异步操作。
2. 将异步操作与状态分离
在 Redux 应用程序中，应该将异步操作与状态分离。例如，可以使用 Redux store 中的状态来表示正在加载数据的状态。当数据加载完成时，可以更新状态并将数据存储在 Redux store 中。
3. 处理错误
在处理异步操作时，一定要考虑错误处理。在 Redux 应用程序中，可以使用错误状态来表示发生了错误。还可以使用 try-catch 块来处理异步操作中的错误。
测试代码
在 React 和 Redux 应用程序中，测试代码是非常重要的。以下是一些最佳实践：
1. 编写单元测试
编写单元测试可以确保组件和 Redux 动作创建器按预期工作。可以使用 Jest、Enzyme 或 React Testing Library 等工具编写单元测试。
2. 编写集成测试
编写集成测试可以确保组件和 Redux store 一起正常工作。可以使用 Cypress 或 Selenium 等工具编写集成测试。
3. 使用测试覆盖率工具
使用测试覆盖率工具可以确保所有代码路径都已测试。可以使用 Istanbul 或 Jest 等工具来检查测试覆盖率。
示例代码
以下是一个使用 React 和 Redux 的示例代码：
// www.javascriptcn.com code example
// auth.js
export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';
export const loginRequest = () => ({
type: LOGIN_REQUEST,
});
export const loginSuccess = (user) => ({
type: LOGIN_SUCCESS,
payload: user,
});
export const loginFailure = (error) => ({
type: LOGIN_FAILURE,
payload: error,
});
export const login = (username, password) => async (dispatch) => {
try {
dispatch(loginRequest());
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ username, password }),
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('Invalid username or password');
}
const user = await response.json();
dispatch(loginSuccess(user));
} catch (error) {
dispatch(loginFailure(error.message));
}
};
// Login.js
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { login } from './auth';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const error = useSelector((state) => state.auth.error);
const handleSubmit = (event) => {
event.preventDefault();
dispatch(login(username, password));
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={(event) => setUsername(event.target.value)}
/>
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<button type="submit">Login</button>
{error && <p>{error}</p>}
</form>
);
};
export default Login;
// auth.test.js
import fetchMock from 'fetch-mock';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { login, loginRequest, loginSuccess, loginFailure } from './auth';
const mockStore = configureMockStore([thunk]);
describe('auth', () => {
afterEach(() => {
fetchMock.reset();
fetchMock.restore();
});
it('should create LOGIN_SUCCESS when login succeeds', async () => {
const user = { username: 'test' };
fetchMock.post('/api/login', {
body: user,
headers: { 'content-type': 'application/json' },
});
const expectedActions = [
loginRequest(),
loginSuccess(user),
];
const store = mockStore({});
await store.dispatch(login('test', 'test'));
expect(store.getActions()).toEqual(expectedActions);
});
it('should create LOGIN_FAILURE when login fails', async () => {
fetchMock.post('/api/login', 401);
const expectedActions = [
loginRequest(),
loginFailure('Invalid username or password'),
];
const store = mockStore({});
await store.dispatch(login('test', 'test'));
expect(store.getActions()).toEqual(expectedActions);
});
});以上就是 React 和 Redux 配合使用的最佳实践，希望对您有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da36c0a941bf71341fb17d