在 React 中将 Store 明确作为 Prop 传递给 Connect()
介绍
React 用于通过遵循基于组件的架构来创建直观的用户界面；因此，它将数据呈现到 DOM 中。Redux 是一种管理应用程序范围状态的方法，因此可以使用 connect ()函数从根状态对象获取数据，从而在整个应用程序中访问数据。
在本指南中，您将学习如何创建 store 并将其作为 prop 传递给Redux 的connect()方法。
通过 Props 传递 Redux Store
Redux 中的 store 是一个包含整个应用程序的状态数据的对象。这意味着根状态对象位于 store 中。
存储是全局状态对象，可以使用方法connect()从任何组件传递和访问。
按照下面的示例创建商店。
import { createStore, combineReducers } from "redux";
import { todos } from "../reducers";
export default () => {
const rootReducer = combineReducers({
todos
});
return createStore(rootReducer);
};
函数CombineReducers接受 Reducer 列表。它创建组合状态对象，该对象通过使用createStore()创建，表示一个存储，并与组合的 Reducer 对象一致。
下一步是在你的 React 应用中配置商店。
import "./style.css";
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import configureStore from "./store";
// Used the store object
const store = configureStore();
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
在上面的代码片段中，使用createStore()创建的存储已被导入，然后使用configureStore()进行配置。
最后一步是通过使用store props将根存储对象传递给提供程序，从而将其传播到 React 应用程序中的所有组件。
<Provider store={store}>
<App />
</Provider>
所以现在，当您想要访问任何组件中的全局状态或存储对象时，您将能够使用connect()方法访问它，如下所示。
export default connect(
({ todos }) => ({ todos }),
{
addTodo,
deleteTodo
}
)(App);
这里，connect()是用于从存储中获取数据的方法，它允许组件访问全局状态对象和名为todos的 Reducer 数据。
这样，您可以创建、配置和传递全局存储对象，并通过使用 connect ()方法来访问数据。
创建自定义 Connect 方法来访问存储
到目前为止，在本指南中，您已经了解了创建存储并使用connect()方法访问它的主要方法。
您还可以实现自定义连接函数。为此，您需要创建一个自定义函数，如下所示。
function connectionWithStore(store, wrapperComponent, ...args) {
var CoonectWithWrapper = connect(...args)(wrapperComponent)
return function (props) {
return <CoonectWithWrapper {...props} store={store} />
}
}
请注意，connectionWithStore接受存储对象、包装器组件和其他参数。
创建函数后，使用带有所需参数的connect()方法以及包装器组件。
var CoonectWithWrapper = connect(...args)(wrapperComponent)
并且相同的组件将与商店道具一起返回，用于使用包装函数访问全局商店数据。
接下来，您可以使用上述包装函数和各种参数（例如下面给出的 store 和mapStetToProps）。
const variable_name = connectionWithStore(store, ...others, mapStateToProps)
通过这样做，您甚至可以使用可按需传递商店的连接组件来访问商店。
注意：*将存储明确传递给连接的组件将对其他组件不可见，但您需要传递存储以使其可用于应用程序中的所有组件，如下所示。*
<Provider store={store}>
<RootComponent />
</Provider>
结论
Redux 允许您通过使用 store 创建全局状态对象来构建数据访问机制，从而在整个 React 应用程序中轻松访问它。我希望了解如何显式传递 store 或使用自定义机制对您有所帮助。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~