现代 React 与 Redux

本文重点介绍现代 React，重点是将 Redux 集成到 React 应用程序中以进行状态管理。我将介绍一些高级 React 功能，例如 useCallback 和有用的 VS Code 扩展，以提高工作效率。

概念亮点：

1. mapStateToProps
2. mapDispatchToProps
3. 将 Redux 添加到 React 的好处
4. Redux Thunk
5. 减速器
6. 选择器
7. VS Code 中的 React 代码段

1.mapStateToProps

在 Redux 中，mapStateToProps 是一个函数，允许您将 Redux 存储中的状态映射到 React 组件的 props。这允许组件访问特定的状态。

语法：

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

例如） 在此示例中，mapStateToProps 从 Redux 存储中提取计数值，并将其作为 CounterComponent 内的 prop 提供。

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2.mapDispatchToProps

与mapStateToProps类似，mapDispatchToProps将调度动作映射到props，使组件能够将动作调度到Redux存储。

语法：

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

例如） 在此示例中，mapDispatchToProps 提供incrementCount 作为CounterComponent 的道具，允许它在调用时分派increment() 操作。

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. React 添加 Redux 的好处

Redux 可以显着改进您的 React 应用程序，尤其是当应用程序变得越来越复杂时。以下是主要好处：

• 集中状态管理：Redux 通过在集中存储中管理状态来提供单一事实来源。这使得管理整个应用程序的状态更改变得更加容易，并提高了可预测性。

• 状态持久化：Redux 可以更轻松地在页面重新加载或路由之间保存和持久化状态，从而使用户体验更加流畅。

• 调试和时间旅行调试：Redux DevTools 允许进行高级调试，并让您检查每个操作和状态更改，甚至返回到之前的状态来修复错误。

• 关注点分离：Redux 将应用程序的状态与 UI 分离，从而实现更多可重用、可维护和可测试的代码。

4.Redux 重击

Redux Thunk 是一个中间件，允许编写返回函数而不是操作对象的操作创建器。这使我们能够在 Redux 操作中执行异步操作（如 API 调用）。

语法：

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

例如） 在此示例中，fetchPosts 是一个异步操作，它从 API 获取数据并根据请求的成功或失败来分派操作。

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5. 减速机

Reducers 是 Redux 中的纯函数，它将当前状态和操作作为参数，并根据操作返回新状态。减速器负责更新 Redux 存储中的状态。

语法：

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

例如） 在此示例中，counterReducer 处理两个操作：INCREMENT 和 DECRMENT，并相应地更新状态中的计数。

const rootReducer = combineReducers({
  counter: counterReducer,
});

const store = createStore(rootReducer);

6. 选择器

选择器 是用于从 Redux 存储中提取或计算派生状态的函数。它们通过记忆结果来提高性能，并提供清晰的 API 来访问部分状态。

语法：

const selectCount = (state) => state.counter.count;

例如） 在此示例中，selectUserPosts 是一个记忆选择器，它根据当前用户的 ID 过滤帖子。选择器可以通过避免不必要的重新计算来提高代码效率。

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. VS Code 中的 React 代码片段

如果您在 VS Code 中进行编码，安装 React Snippets 扩展可以大大加快您的工作流程。此扩展提供了创建组件、挂钩和其他常见 React 代码结构的便捷快捷方式，帮助用户利用代码模板更快地编写干净且一致的 React 代码。

例如）尝试 rfc、rafc 或 rafce 后跟 Tab 键将为 React 功能组件生成以下代码：

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

以上是现代 React 与 Redux的详细内容。更多信息请关注PHP中文网其他相关文章！