本文旨在解决 React Redux 应用中，如何有效地在不同组件之间共享从 API 获取的数据，特别是 customerId 这样的关键信息。文章将深入探讨 Redux reducer 的正确实现方式，避免 state 突变，并提供使用 useDispatch 和 useSelector hook 的最佳实践示例，确保数据在整个应用中保持一致和可访问。
Redux Reducer 的正确实现：避免 State 突变
Redux 的核心原则之一是 state 的不可变性。这意味着在 reducer 中，我们不应该直接修改现有的 state 对象，而是应该创建一个新的 state 对象，并返回它。直接修改 state 会导致难以追踪的 bug，并破坏 Redux 的时间旅行调试功能。
以下是一个常见的错误示例：
const Datareducer = (state = initialState, action) => { switch (action.type) { case types.UPDATE_DATA: const output = action.payload; if (output.sessionDetails) { state.sessionDetails = output.sessionDetails; // 错误：直接修改 state } return { ...state, } break; default: return state; }}
正确的做法是使用展开运算符 (…) 创建 state 的浅拷贝，然后在拷贝对象上进行修改。
const dataReducer = (state = initialState, action) => { switch (action.type) { case types.UPDATE_DATA: const { sessionDetails } = action.payload; if (sessionDetails) { return { ...state, sessionDetails: { ...state.sessionDetails, ...sessionDetails, } }; } return state; default: return state; }};
解释：
…state: 创建一个新的对象，包含 state 的所有现有属性。sessionDetails: { …state.sessionDetails, …sessionDetails }: 创建一个新的 sessionDetails 对象，首先复制现有的 state.sessionDetails 属性，然后用 action.payload.sessionDetails 中的属性覆盖它们。
这种方法确保了我们始终返回一个新的 state 对象，从而保持了 state 的不可变性。
在 React 组件中使用 useDispatch 和 useSelector
useDispatch 和 useSelector 是 react-redux 提供的两个重要的 hook，用于在 React 组件中与 Redux store 进行交互。
useDispatch: 用于获取 dispatch 函数的引用，允许你触发 Redux actions。useSelector: 用于从 Redux store 中提取数据。
以下是一个使用 useDispatch 获取 API 数据并更新 Redux store 的示例：
import { useDispatch } from 'react-redux';import * as types from './action'; // 假设你定义了 actionsconst Test = () => { const dispatch = useDispatch(); useEffect(() => { const sessionInformation = async () => { const sessionId = '5f9f0de7-c7b3-3029'; console.log("sessionInformaiton: ", sessionId); try { const { data } = await SessionInformationService({ sessionId }); console.log("Result: ", { data }); if (data) { const userData = { sessionDetails: { customerId: data.customerId, firstName: data.customerfirstName, lastName: data.customerlastName, fullName: data.customerfullName, } }; dispatch(types.updateData(userData)); } } catch (error) { // handle any errors, if necessary, or ignore, your call } }; sessionInformation(); }, []); return ( ... 解释：
useDispatch(): 获取 dispatch 函数。useEffect(): 在组件挂载后执行一次。sessionInformation(): 一个异步函数，用于获取 API 数据。SessionInformationService(): 一个假设的 API 服务函数，返回一个 Promise。dispatch(types.updateData(userData)): 触发 updateData action，将 API 数据存储到 Redux store 中。以下是如何使用 useSelector 从 Redux store 中获取 customerId 的示例：
import { useSelector } from 'react-redux';const SomeComponent = () => { const { customerId } = useSelector( state => state.app.DataReducer.sessionDetails.customerId ); return ( Customer ID: {customerId} );};
解释：
useSelector(state => state.app.DataReducer.sessionDetails.customerId): 从 Redux store 中提取 customerId。 state.app.DataReducer.sessionDetails.customerId 是根据你的 reducer 结构定义的选择器函数。 确保你的选择器函数与你的 Redux store 的结构匹配。
注意事项：
确保你的 Redux store 结构正确，以便 useSelector 可以正确地提取数据。使用 memoization 技术优化 useSelector 的性能，避免不必要的重新渲染。 可以使用 reselect 库或 useMemo hook 来实现 memoization。
总结
通过正确地实现 Redux reducer，避免 state 突变，并有效地使用 useDispatch 和 useSelector hook，你可以在 React Redux 应用中轻松地在不同组件之间共享 API 响应数据。 始终记住保持 state 的不可变性，并使用正确的选择器函数来访问 Redux store 中的数据。 这将使你的应用程序更易于维护，更可靠且更高效。
以上就是React Redux 中跨组件共享 API 响应数据：最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517672.html
微信扫一扫 
支付宝扫一扫 
