本文重点介绍现代 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中文网其它相关文章！