介绍
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 或使用自定义机制对您有所帮助。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
