Question

这是一个基本的react-redux应用（sandbox）：

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { useDispatch, Provider, useSelector, useStore } from "react-redux";
const App = () => {
  const store = useStore(); // <- how it gets the store object of Provider ?
  const state = useSelector(s => s);
  return <div>{state}</div>;
};
ReactDOM.render(
  <Provider store={createStore((state, action) => 5)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

现在我的问题是：

像useStore这样的钩子如何获取我们在<Provider store={store}>中设置的存储对象？

如果是dom，我们可以使用this.closest('.provider').getAttribute('store')获取父元素中provider元素的store属性。但是我们如何反应呢？

我问这个问题是因为我想了解react-redux在幕后的工作方式。

谢谢。

Answer 1

react-redux使用一个提供程序，该提供程序包含其使用的所有属性。它允许您通过漂亮的API（例如hooks API（useStore，useDispatch）或connect() HOC API从提供程序获取内部信息。

为帮助您以更简单的方式可视化它，让我们使用React Context API编写一个“迷你” react-redux

import React, { createContext, useContext } from 'react';

const InternalProvider = createContext();

/**
 * This is the `Provider` you import from `react-redux`.
 * It holds all of the things child components will need
 */
const Provider = ({ store, children }) => {
  /**
   * This `context` object is what's going to be passed down 
   * through React Context API. You can use `<Consumer>` or 
   * `useContext` to get this object from any react-redux-internal
   * child component.  We'll consume it on our `useStore` and
   * `useDispatch` hooks
   */
  const context = {
    getStore: () => store,
    getDispatch: (action) => store.dispatch,
  };

  return (
    <InternalProvider value={context}>
      {children}
    </InternalProvider>
  );
}


/**
 * These are the hooks you import from `react-redux`.
 * It's dead simple, you use `useContext` to pull the `context`
 * object, and voila! you have a reference.
 */
const useStore = () => {
  const context = useContext(InternalProvider)
  const store = context.getStore();
  return context;
};

const useDispatch = () => {
  const { getDispatch } useContext(InternalProvider);

  return getDispatch();
};


/***************************************
 * Your redux-aware components
 *
 * This is how you consume `react-redux` in your app
 */
const MyComponent = () => {
  const store = useStore();
  const dispatch = useDispatch();

  return <>Foo</>
}

const App = () => (
  <Provider store={store}>
    <MyComponent />
  </Provider>
)

react-redux如何获取提供者的存储对象？

1 个答案: