本文重点介绍现代 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) => {
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>
)
}
