reduxjs/cra-template-redux 开源项目教程

reduxjs/cra-template-redux 开源项目教程

cra-template-reduxARCHIVED: the CRA+JS template has moved to https://github.com/reduxjs/redux-templates项目地址:https://gitcode.com/gh_mirrors/cr/cra-template-redux

---

项目介绍

reduxjs/cra-template-redux 是一个基于 Create React App (CRA) 的模板，专为那些希望在新的 React 项目中立即集成 Redux 状态管理库的开发者设计。这个模板简化了初始化配置过程，允许你迅速启动并运行具有Redux、React Router（通常集成）及其他常用开发工具的项目，无需手动安装和配置。

项目快速启动

要快速启动一个新的项目，确保你的系统已安装 Node.js 和 npx（Node 8.10+ 自带），然后遵循以下步骤：

npx create-react-app my-app --template cra-template-redux
cd my-app
npm start

上述命令首先创建了一个名为 my-app 的新项目，使用 cra-template-redux 作为初始模板。接着，进入项目目录并启动 development server。浏览器应自动打开展示你的新 Redux 集成应用。

注意: 如果你想自定义 Redux 的某些配置或添加其他特性，你可能需要深入了解 Redux 和 CRA的文档以进行调整。

应用案例和最佳实践

应用案例

在使用此模板开发时，最佳实践之一是采用“ Ducks Pattern ”来组织你的 Redux 模块，即将相关的 action 创建器和 reducer 放在一个文件夹中。这不仅提高了代码的可读性，也便于维护。

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
        increment(state) {
            state.value += 1;
        },
        decrement(state) {
            state.value -= 1;
        },
    },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

最佳实践

• 使用 Redux Toolkit: 它提供了更简洁的方式来写Redux逻辑，如使用 createSlice 来替代传统的 reducers.js 文件。
• TypeScript集成: 对于大型项目，建议使用TypeScript来增强类型安全性。
• 异步逻辑: 利用 createAsyncThunk 处理异步操作，如 API 调用。

典型生态项目

在 Redux 生态中，有几个关键的库常与之搭配使用，提升开发体验：

1. Redux Toolkit: 已经提到，它极大地简化了Redux的常见工作流程。
2. Redux DevTools: 提供了强大的调试工具，帮助实时监控状态变更和行动流。
3. Reselect: 用于创建高效的选择器函数，减少不必要的reducer触发。
4. Redux-Thunk: 解决异步action的问题，虽然Redux Toolkit内部已经包含了处理异步逻辑的工具，但在一些特定场景下仍被广泛使用。
5. @reduxjs/toolkit Query: 近年来，它成为了一个流行的解决方案，尤其是在处理API调用和数据缓存方面，但需注意它不是一个标准部分，而是另一个官方扩展库。

通过结合这些生态中的组件，可以构建出既高效又易于维护的React应用程序。

cra-template-reduxARCHIVED: the CRA+JS template has moved to https://github.com/reduxjs/redux-templates项目地址:https://gitcode.com/gh_mirrors/cr/cra-template-redux