现代 React 与 Redux

百变鹏仔 4天前 #JavaScript

文章标签 React

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

概念亮点：

mapstatetoprops
mapdispatchtoprops
将 redux 添加到 react 的好处
redux thunk
减速器
选择器
vs code 中的 react 代码段

1.mapstatetoprops

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

语法：

const mapstatetoprops = (state) =&gt; {  return {    data: state.data,  },};

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

const mapstatetoprops = (state) =&gt; {  count: state.counter.count,});export default connect(mapstatetoprops)(countercomponent);

2.mapdispatchtoprops

与mapstatetoprops类似，mapdispatchtoprops将调度动作映射到props，使组件能够将动作调度到redux存储。

语法：

const mapdispatchtoprops = (dispatch) =&gt; {  return {    increment: () =&gt; dispatch({ type: 'increment' }),    decrement: () =&gt; dispatch({ type: 'decrement' }),  },};

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

const mapdispatchtoprops = (dispatch) =&gt; ({  incrementcount: () =&gt; dispatch(increment()),});

3. react 添加 redux 的好处

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

4.redux 重击

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

语法：

 const fetchdata = () =&gt; {  return (dispatch) =&gt; {    fetch('https://api.example.com/data')      .then(response =&gt; response.json())      .then(data =&gt; dispatch({ type: 'fetch_success', payload: data }))      .then(error =&gt; dispatch({ type: 'fetch_error', error }));  };};

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

function fetchposts() {  return async (dispatch) =&gt; {    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) =&gt; state.counter.count;

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

const selectuserposts = createselector(  [state =&gt; state.posts, state =&gt; state.userid],  (posts, userid) =&gt; posts.filter(post =&gt; post.userid === userid)};

7. vs code 中的 react 代码片段

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

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

import React from 'react'const ComponentName = () =&gt; {  return (    <div>    </div>  )}

文章推荐

现代 React 与 Redux

概念亮点：

1.mapstatetoprops

2.mapdispatchtoprops

3. react 添加 redux 的好处

4.redux 重击

5. 减速机

6. 选择器

7. vs code 中的 react 代码片段

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？