adds integrations with bookish-server, the books API and the google books API, adds functionality for library, searching for books, and displaying renters registered in the system
This commit is contained in:
David Lick
+1
@@ -0,0 +1 @@
|
||||
All notable changes are described on the [Releases](https://github.com/reduxjs/react-redux/releases) page.
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015-present Dan Abramov
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
React Redux
|
||||
=========================
|
||||
|
||||
Official React bindings for [Redux](https://github.com/reduxjs/redux).
|
||||
Performant and flexible.
|
||||
|
||||
[](https://travis-ci.org/reduxjs/react-redux) [](https://www.npmjs.com/package/react-redux)
|
||||
[](https://www.npmjs.com/package/react-redux)
|
||||
[](http://www.reactiflux.com)
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
React Redux requires **React 16.8.3 or later.**
|
||||
|
||||
```
|
||||
npm install --save react-redux
|
||||
```
|
||||
|
||||
This assumes that you’re using [npm](http://npmjs.com/) package manager
|
||||
with a module bundler like [Webpack](https://webpack.js.org/) or
|
||||
[Browserify](http://browserify.org/) to consume [CommonJS
|
||||
modules](https://webpack.js.org/api/module-methods/#commonjs).
|
||||
|
||||
If you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactRedux` available as a global object, you can grab a pre-built version from [cdnjs](https://cdnjs.com/libraries/react-redux). We *don’t* recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on [npm](http://npmjs.com/).
|
||||
|
||||
## React Native
|
||||
|
||||
As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run `npm ls react` and make sure you don’t have a duplicate React installation in your `node_modules`. We recommend that you use `npm@3.x` which is better at avoiding these kinds of issues.
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
The React Redux docs are now published at **https://react-redux.js.org** .
|
||||
|
||||
We're currently expanding and rewriting our docs content - check back soon for more updates!
|
||||
|
||||
## How Does It Work?
|
||||
|
||||
We do a deep dive on how React Redux works in [this readthesource episode](https://www.youtube.com/watch?v=VJ38wSFbM3A).
|
||||
|
||||
Also, the post [The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
|
||||
explains what it does, how it works, and how the API and implementation have evolved over time.
|
||||
|
||||
Enjoy!
|
||||
|
||||
## License
|
||||
|
||||
[MIT](LICENSE.md)
|
||||
+2424
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+12
@@ -0,0 +1,12 @@
|
||||
import Provider from './components/Provider';
|
||||
import connectAdvanced from './components/connectAdvanced';
|
||||
import { ReactReduxContext } from './components/Context';
|
||||
import connect from './connect/connect';
|
||||
import { useDispatch } from './hooks/useDispatch';
|
||||
import { useSelector } from './hooks/useSelector';
|
||||
import { useStore } from './hooks/useStore';
|
||||
import { getBatch } from './utils/batch';
|
||||
import shallowEqual from './utils/shallowEqual'; // For other renderers besides ReactDOM and React Native, use the default noop batch function
|
||||
|
||||
var batch = getBatch();
|
||||
export { Provider, connectAdvanced, ReactReduxContext, connect, batch, useDispatch, useSelector, useStore, shallowEqual };
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
export var ReactReduxContext =
|
||||
/*#__PURE__*/
|
||||
React.createContext(null);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
ReactReduxContext.displayName = 'ReactRedux';
|
||||
}
|
||||
|
||||
export default ReactReduxContext;
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import React, { useMemo, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ReactReduxContext } from './Context';
|
||||
import Subscription from '../utils/Subscription';
|
||||
|
||||
function Provider(_ref) {
|
||||
var store = _ref.store,
|
||||
context = _ref.context,
|
||||
children = _ref.children;
|
||||
var contextValue = useMemo(function () {
|
||||
var subscription = new Subscription(store);
|
||||
subscription.onStateChange = subscription.notifyNestedSubs;
|
||||
return {
|
||||
store: store,
|
||||
subscription: subscription
|
||||
};
|
||||
}, [store]);
|
||||
var previousState = useMemo(function () {
|
||||
return store.getState();
|
||||
}, [store]);
|
||||
useEffect(function () {
|
||||
var subscription = contextValue.subscription;
|
||||
subscription.trySubscribe();
|
||||
|
||||
if (previousState !== store.getState()) {
|
||||
subscription.notifyNestedSubs();
|
||||
}
|
||||
|
||||
return function () {
|
||||
subscription.tryUnsubscribe();
|
||||
subscription.onStateChange = null;
|
||||
};
|
||||
}, [contextValue, previousState]);
|
||||
var Context = context || ReactReduxContext;
|
||||
return React.createElement(Context.Provider, {
|
||||
value: contextValue
|
||||
}, children);
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Provider.propTypes = {
|
||||
store: PropTypes.shape({
|
||||
subscribe: PropTypes.func.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
getState: PropTypes.func.isRequired
|
||||
}),
|
||||
context: PropTypes.object,
|
||||
children: PropTypes.any
|
||||
};
|
||||
}
|
||||
|
||||
export default Provider;
|
||||
+369
@@ -0,0 +1,369 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import hoistStatics from 'hoist-non-react-statics';
|
||||
import React, { useContext, useMemo, useRef, useReducer } from 'react';
|
||||
import { isValidElementType, isContextConsumer } from 'react-is';
|
||||
import Subscription from '../utils/Subscription';
|
||||
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';
|
||||
import { ReactReduxContext } from './Context'; // Define some constant arrays just to avoid re-creating these
|
||||
|
||||
var EMPTY_ARRAY = [];
|
||||
var NO_SUBSCRIPTION_ARRAY = [null, null];
|
||||
|
||||
var stringifyComponent = function stringifyComponent(Comp) {
|
||||
try {
|
||||
return JSON.stringify(Comp);
|
||||
} catch (err) {
|
||||
return String(Comp);
|
||||
}
|
||||
};
|
||||
|
||||
function storeStateUpdatesReducer(state, action) {
|
||||
var updateCount = state[1];
|
||||
return [action.payload, updateCount + 1];
|
||||
}
|
||||
|
||||
function useIsomorphicLayoutEffectWithArgs(effectFunc, effectArgs, dependencies) {
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
return effectFunc.apply(void 0, effectArgs);
|
||||
}, dependencies);
|
||||
}
|
||||
|
||||
function captureWrapperProps(lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs) {
|
||||
// We want to capture the wrapper props and child props we used for later comparisons
|
||||
lastWrapperProps.current = wrapperProps;
|
||||
lastChildProps.current = actualChildProps;
|
||||
renderIsScheduled.current = false; // If the render was from a store update, clear out that reference and cascade the subscriber update
|
||||
|
||||
if (childPropsFromStoreUpdate.current) {
|
||||
childPropsFromStoreUpdate.current = null;
|
||||
notifyNestedSubs();
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeUpdates(shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch) {
|
||||
// If we're not subscribed to the store, nothing to do here
|
||||
if (!shouldHandleStateChanges) return; // Capture values for checking if and when this component unmounts
|
||||
|
||||
var didUnsubscribe = false;
|
||||
var lastThrownError = null; // We'll run this callback every time a store subscription update propagates to this component
|
||||
|
||||
var checkForUpdates = function checkForUpdates() {
|
||||
if (didUnsubscribe) {
|
||||
// Don't run stale listeners.
|
||||
// Redux doesn't guarantee unsubscriptions happen until next dispatch.
|
||||
return;
|
||||
}
|
||||
|
||||
var latestStoreState = store.getState();
|
||||
var newChildProps, error;
|
||||
|
||||
try {
|
||||
// Actually run the selector with the most recent store state and wrapper props
|
||||
// to determine what the child props should be
|
||||
newChildProps = childPropsSelector(latestStoreState, lastWrapperProps.current);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
lastThrownError = e;
|
||||
}
|
||||
|
||||
if (!error) {
|
||||
lastThrownError = null;
|
||||
} // If the child props haven't changed, nothing to do here - cascade the subscription update
|
||||
|
||||
|
||||
if (newChildProps === lastChildProps.current) {
|
||||
if (!renderIsScheduled.current) {
|
||||
notifyNestedSubs();
|
||||
}
|
||||
} else {
|
||||
// Save references to the new child props. Note that we track the "child props from store update"
|
||||
// as a ref instead of a useState/useReducer because we need a way to determine if that value has
|
||||
// been processed. If this went into useState/useReducer, we couldn't clear out the value without
|
||||
// forcing another re-render, which we don't want.
|
||||
lastChildProps.current = newChildProps;
|
||||
childPropsFromStoreUpdate.current = newChildProps;
|
||||
renderIsScheduled.current = true; // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
|
||||
|
||||
forceComponentUpdateDispatch({
|
||||
type: 'STORE_UPDATED',
|
||||
payload: {
|
||||
error: error
|
||||
}
|
||||
});
|
||||
}
|
||||
}; // Actually subscribe to the nearest connected ancestor (or store)
|
||||
|
||||
|
||||
subscription.onStateChange = checkForUpdates;
|
||||
subscription.trySubscribe(); // Pull data from the store after first render in case the store has
|
||||
// changed since we began.
|
||||
|
||||
checkForUpdates();
|
||||
|
||||
var unsubscribeWrapper = function unsubscribeWrapper() {
|
||||
didUnsubscribe = true;
|
||||
subscription.tryUnsubscribe();
|
||||
subscription.onStateChange = null;
|
||||
|
||||
if (lastThrownError) {
|
||||
// It's possible that we caught an error due to a bad mapState function, but the
|
||||
// parent re-rendered without this component and we're about to unmount.
|
||||
// This shouldn't happen as long as we do top-down subscriptions correctly, but
|
||||
// if we ever do those wrong, this throw will surface the error in our tests.
|
||||
// In that case, throw the error from here so it doesn't get lost.
|
||||
throw lastThrownError;
|
||||
}
|
||||
};
|
||||
|
||||
return unsubscribeWrapper;
|
||||
}
|
||||
|
||||
var initStateUpdates = function initStateUpdates() {
|
||||
return [null, 0];
|
||||
};
|
||||
|
||||
export default function connectAdvanced(
|
||||
/*
|
||||
selectorFactory is a func that is responsible for returning the selector function used to
|
||||
compute new props from state, props, and dispatch. For example:
|
||||
export default connectAdvanced((dispatch, options) => (state, props) => ({
|
||||
thing: state.things[props.thingId],
|
||||
saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
|
||||
}))(YourComponent)
|
||||
Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
|
||||
outside of their selector as an optimization. Options passed to connectAdvanced are passed to
|
||||
the selectorFactory, along with displayName and WrappedComponent, as the second argument.
|
||||
Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
|
||||
props. Do not use connectAdvanced directly without memoizing results between calls to your
|
||||
selector, otherwise the Connect component will re-render on every state or props change.
|
||||
*/
|
||||
selectorFactory, // options object:
|
||||
_ref) {
|
||||
if (_ref === void 0) {
|
||||
_ref = {};
|
||||
}
|
||||
|
||||
var _ref2 = _ref,
|
||||
_ref2$getDisplayName = _ref2.getDisplayName,
|
||||
getDisplayName = _ref2$getDisplayName === void 0 ? function (name) {
|
||||
return "ConnectAdvanced(" + name + ")";
|
||||
} : _ref2$getDisplayName,
|
||||
_ref2$methodName = _ref2.methodName,
|
||||
methodName = _ref2$methodName === void 0 ? 'connectAdvanced' : _ref2$methodName,
|
||||
_ref2$renderCountProp = _ref2.renderCountProp,
|
||||
renderCountProp = _ref2$renderCountProp === void 0 ? undefined : _ref2$renderCountProp,
|
||||
_ref2$shouldHandleSta = _ref2.shouldHandleStateChanges,
|
||||
shouldHandleStateChanges = _ref2$shouldHandleSta === void 0 ? true : _ref2$shouldHandleSta,
|
||||
_ref2$storeKey = _ref2.storeKey,
|
||||
storeKey = _ref2$storeKey === void 0 ? 'store' : _ref2$storeKey,
|
||||
_ref2$withRef = _ref2.withRef,
|
||||
withRef = _ref2$withRef === void 0 ? false : _ref2$withRef,
|
||||
_ref2$forwardRef = _ref2.forwardRef,
|
||||
forwardRef = _ref2$forwardRef === void 0 ? false : _ref2$forwardRef,
|
||||
_ref2$context = _ref2.context,
|
||||
context = _ref2$context === void 0 ? ReactReduxContext : _ref2$context,
|
||||
connectOptions = _objectWithoutPropertiesLoose(_ref2, ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef", "forwardRef", "context"]);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (renderCountProp !== undefined) {
|
||||
throw new Error("renderCountProp is removed. render counting is built into the latest React Dev Tools profiling extension");
|
||||
}
|
||||
|
||||
if (withRef) {
|
||||
throw new Error('withRef is removed. To access the wrapped instance, use a ref on the connected component');
|
||||
}
|
||||
|
||||
var customStoreWarningMessage = 'To use a custom Redux store for specific components, create a custom React context with ' + "React.createContext(), and pass the context object to React Redux's Provider and specific components" + ' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' + 'You may also pass a {context : MyContext} option to connect';
|
||||
|
||||
if (storeKey !== 'store') {
|
||||
throw new Error('storeKey has been removed and does not do anything. ' + customStoreWarningMessage);
|
||||
}
|
||||
}
|
||||
|
||||
var Context = context;
|
||||
return function wrapWithConnect(WrappedComponent) {
|
||||
if (process.env.NODE_ENV !== 'production' && !isValidElementType(WrappedComponent)) {
|
||||
throw new Error("You must pass a component to the function returned by " + (methodName + ". Instead received " + stringifyComponent(WrappedComponent)));
|
||||
}
|
||||
|
||||
var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
|
||||
var displayName = getDisplayName(wrappedComponentName);
|
||||
|
||||
var selectorFactoryOptions = _extends({}, connectOptions, {
|
||||
getDisplayName: getDisplayName,
|
||||
methodName: methodName,
|
||||
renderCountProp: renderCountProp,
|
||||
shouldHandleStateChanges: shouldHandleStateChanges,
|
||||
storeKey: storeKey,
|
||||
displayName: displayName,
|
||||
wrappedComponentName: wrappedComponentName,
|
||||
WrappedComponent: WrappedComponent
|
||||
});
|
||||
|
||||
var pure = connectOptions.pure;
|
||||
|
||||
function createChildSelector(store) {
|
||||
return selectorFactory(store.dispatch, selectorFactoryOptions);
|
||||
} // If we aren't running in "pure" mode, we don't want to memoize values.
|
||||
// To avoid conditionally calling hooks, we fall back to a tiny wrapper
|
||||
// that just executes the given callback immediately.
|
||||
|
||||
|
||||
var usePureOnlyMemo = pure ? useMemo : function (callback) {
|
||||
return callback();
|
||||
};
|
||||
|
||||
function ConnectFunction(props) {
|
||||
var _useMemo = useMemo(function () {
|
||||
// Distinguish between actual "data" props that were passed to the wrapper component,
|
||||
// and values needed to control behavior (forwarded refs, alternate context instances).
|
||||
// To maintain the wrapperProps object reference, memoize this destructuring.
|
||||
var forwardedRef = props.forwardedRef,
|
||||
wrapperProps = _objectWithoutPropertiesLoose(props, ["forwardedRef"]);
|
||||
|
||||
return [props.context, forwardedRef, wrapperProps];
|
||||
}, [props]),
|
||||
propsContext = _useMemo[0],
|
||||
forwardedRef = _useMemo[1],
|
||||
wrapperProps = _useMemo[2];
|
||||
|
||||
var ContextToUse = useMemo(function () {
|
||||
// Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
|
||||
// Memoize the check that determines which context instance we should use.
|
||||
return propsContext && propsContext.Consumer && isContextConsumer(React.createElement(propsContext.Consumer, null)) ? propsContext : Context;
|
||||
}, [propsContext, Context]); // Retrieve the store and ancestor subscription via context, if available
|
||||
|
||||
var contextValue = useContext(ContextToUse); // The store _must_ exist as either a prop or in context.
|
||||
// We'll check to see if it _looks_ like a Redux store first.
|
||||
// This allows us to pass through a `store` prop that is just a plain value.
|
||||
|
||||
var didStoreComeFromProps = Boolean(props.store) && Boolean(props.store.getState) && Boolean(props.store.dispatch);
|
||||
var didStoreComeFromContext = Boolean(contextValue) && Boolean(contextValue.store);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !didStoreComeFromProps && !didStoreComeFromContext) {
|
||||
throw new Error("Could not find \"store\" in the context of " + ("\"" + displayName + "\". Either wrap the root component in a <Provider>, ") + "or pass a custom React context provider to <Provider> and the corresponding " + ("React context consumer to " + displayName + " in connect options."));
|
||||
} // Based on the previous check, one of these must be true
|
||||
|
||||
|
||||
var store = didStoreComeFromProps ? props.store : contextValue.store;
|
||||
var childPropsSelector = useMemo(function () {
|
||||
// The child props selector needs the store reference as an input.
|
||||
// Re-create this selector whenever the store changes.
|
||||
return createChildSelector(store);
|
||||
}, [store]);
|
||||
|
||||
var _useMemo2 = useMemo(function () {
|
||||
if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY; // This Subscription's source should match where store came from: props vs. context. A component
|
||||
// connected to the store via props shouldn't use subscription from context, or vice versa.
|
||||
|
||||
var subscription = new Subscription(store, didStoreComeFromProps ? null : contextValue.subscription); // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
|
||||
// the middle of the notification loop, where `subscription` will then be null. This can
|
||||
// probably be avoided if Subscription's listeners logic is changed to not call listeners
|
||||
// that have been unsubscribed in the middle of the notification loop.
|
||||
|
||||
var notifyNestedSubs = subscription.notifyNestedSubs.bind(subscription);
|
||||
return [subscription, notifyNestedSubs];
|
||||
}, [store, didStoreComeFromProps, contextValue]),
|
||||
subscription = _useMemo2[0],
|
||||
notifyNestedSubs = _useMemo2[1]; // Determine what {store, subscription} value should be put into nested context, if necessary,
|
||||
// and memoize that value to avoid unnecessary context updates.
|
||||
|
||||
|
||||
var overriddenContextValue = useMemo(function () {
|
||||
if (didStoreComeFromProps) {
|
||||
// This component is directly subscribed to a store from props.
|
||||
// We don't want descendants reading from this store - pass down whatever
|
||||
// the existing context value is from the nearest connected ancestor.
|
||||
return contextValue;
|
||||
} // Otherwise, put this component's subscription instance into context, so that
|
||||
// connected descendants won't update until after this component is done
|
||||
|
||||
|
||||
return _extends({}, contextValue, {
|
||||
subscription: subscription
|
||||
});
|
||||
}, [didStoreComeFromProps, contextValue, subscription]); // We need to force this wrapper component to re-render whenever a Redux store update
|
||||
// causes a change to the calculated child component props (or we caught an error in mapState)
|
||||
|
||||
var _useReducer = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates),
|
||||
_useReducer$ = _useReducer[0],
|
||||
previousStateUpdateResult = _useReducer$[0],
|
||||
forceComponentUpdateDispatch = _useReducer[1]; // Propagate any mapState/mapDispatch errors upwards
|
||||
|
||||
|
||||
if (previousStateUpdateResult && previousStateUpdateResult.error) {
|
||||
throw previousStateUpdateResult.error;
|
||||
} // Set up refs to coordinate values between the subscription effect and the render logic
|
||||
|
||||
|
||||
var lastChildProps = useRef();
|
||||
var lastWrapperProps = useRef(wrapperProps);
|
||||
var childPropsFromStoreUpdate = useRef();
|
||||
var renderIsScheduled = useRef(false);
|
||||
var actualChildProps = usePureOnlyMemo(function () {
|
||||
// Tricky logic here:
|
||||
// - This render may have been triggered by a Redux store update that produced new child props
|
||||
// - However, we may have gotten new wrapper props after that
|
||||
// If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
|
||||
// But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
|
||||
// So, we'll use the child props from store update only if the wrapper props are the same as last time.
|
||||
if (childPropsFromStoreUpdate.current && wrapperProps === lastWrapperProps.current) {
|
||||
return childPropsFromStoreUpdate.current;
|
||||
} // TODO We're reading the store directly in render() here. Bad idea?
|
||||
// This will likely cause Bad Things (TM) to happen in Concurrent Mode.
|
||||
// Note that we do this because on renders _not_ caused by store updates, we need the latest store state
|
||||
// to determine what the child props should be.
|
||||
|
||||
|
||||
return childPropsSelector(store.getState(), wrapperProps);
|
||||
}, [store, previousStateUpdateResult, wrapperProps]); // We need this to execute synchronously every time we re-render. However, React warns
|
||||
// about useLayoutEffect in SSR, so we try to detect environment and fall back to
|
||||
// just useEffect instead to avoid the warning, since neither will run anyway.
|
||||
|
||||
useIsomorphicLayoutEffectWithArgs(captureWrapperProps, [lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs]); // Our re-subscribe logic only runs when the store/subscription setup changes
|
||||
|
||||
useIsomorphicLayoutEffectWithArgs(subscribeUpdates, [shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch], [store, subscription, childPropsSelector]); // Now that all that's done, we can finally try to actually render the child component.
|
||||
// We memoize the elements for the rendered child component as an optimization.
|
||||
|
||||
var renderedWrappedComponent = useMemo(function () {
|
||||
return React.createElement(WrappedComponent, _extends({}, actualChildProps, {
|
||||
ref: forwardedRef
|
||||
}));
|
||||
}, [forwardedRef, WrappedComponent, actualChildProps]); // If React sees the exact same element reference as last time, it bails out of re-rendering
|
||||
// that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
|
||||
|
||||
var renderedChild = useMemo(function () {
|
||||
if (shouldHandleStateChanges) {
|
||||
// If this component is subscribed to store updates, we need to pass its own
|
||||
// subscription instance down to our descendants. That means rendering the same
|
||||
// Context instance, and putting a different value into the context.
|
||||
return React.createElement(ContextToUse.Provider, {
|
||||
value: overriddenContextValue
|
||||
}, renderedWrappedComponent);
|
||||
}
|
||||
|
||||
return renderedWrappedComponent;
|
||||
}, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);
|
||||
return renderedChild;
|
||||
} // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
|
||||
|
||||
|
||||
var Connect = pure ? React.memo(ConnectFunction) : ConnectFunction;
|
||||
Connect.WrappedComponent = WrappedComponent;
|
||||
Connect.displayName = displayName;
|
||||
|
||||
if (forwardRef) {
|
||||
var forwarded = React.forwardRef(function forwardConnectRef(props, ref) {
|
||||
return React.createElement(Connect, _extends({}, props, {
|
||||
forwardedRef: ref
|
||||
}));
|
||||
});
|
||||
forwarded.displayName = displayName;
|
||||
forwarded.WrappedComponent = WrappedComponent;
|
||||
return hoistStatics(forwarded, WrappedComponent);
|
||||
}
|
||||
|
||||
return hoistStatics(Connect, WrappedComponent);
|
||||
};
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import connectAdvanced from '../components/connectAdvanced';
|
||||
import shallowEqual from '../utils/shallowEqual';
|
||||
import defaultMapDispatchToPropsFactories from './mapDispatchToProps';
|
||||
import defaultMapStateToPropsFactories from './mapStateToProps';
|
||||
import defaultMergePropsFactories from './mergeProps';
|
||||
import defaultSelectorFactory from './selectorFactory';
|
||||
/*
|
||||
connect is a facade over connectAdvanced. It turns its args into a compatible
|
||||
selectorFactory, which has the signature:
|
||||
|
||||
(dispatch, options) => (nextState, nextOwnProps) => nextFinalProps
|
||||
|
||||
connect passes its args to connectAdvanced as options, which will in turn pass them to
|
||||
selectorFactory each time a Connect component instance is instantiated or hot reloaded.
|
||||
|
||||
selectorFactory returns a final props selector from its mapStateToProps,
|
||||
mapStateToPropsFactories, mapDispatchToProps, mapDispatchToPropsFactories, mergeProps,
|
||||
mergePropsFactories, and pure args.
|
||||
|
||||
The resulting final props selector is called by the Connect component instance whenever
|
||||
it receives new props or store state.
|
||||
*/
|
||||
|
||||
function match(arg, factories, name) {
|
||||
for (var i = factories.length - 1; i >= 0; i--) {
|
||||
var result = factories[i](arg);
|
||||
if (result) return result;
|
||||
}
|
||||
|
||||
return function (dispatch, options) {
|
||||
throw new Error("Invalid value of type " + typeof arg + " for " + name + " argument when connecting component " + options.wrappedComponentName + ".");
|
||||
};
|
||||
}
|
||||
|
||||
function strictEqual(a, b) {
|
||||
return a === b;
|
||||
} // createConnect with default args builds the 'official' connect behavior. Calling it with
|
||||
// different options opens up some testing and extensibility scenarios
|
||||
|
||||
|
||||
export function createConnect(_temp) {
|
||||
var _ref = _temp === void 0 ? {} : _temp,
|
||||
_ref$connectHOC = _ref.connectHOC,
|
||||
connectHOC = _ref$connectHOC === void 0 ? connectAdvanced : _ref$connectHOC,
|
||||
_ref$mapStateToPropsF = _ref.mapStateToPropsFactories,
|
||||
mapStateToPropsFactories = _ref$mapStateToPropsF === void 0 ? defaultMapStateToPropsFactories : _ref$mapStateToPropsF,
|
||||
_ref$mapDispatchToPro = _ref.mapDispatchToPropsFactories,
|
||||
mapDispatchToPropsFactories = _ref$mapDispatchToPro === void 0 ? defaultMapDispatchToPropsFactories : _ref$mapDispatchToPro,
|
||||
_ref$mergePropsFactor = _ref.mergePropsFactories,
|
||||
mergePropsFactories = _ref$mergePropsFactor === void 0 ? defaultMergePropsFactories : _ref$mergePropsFactor,
|
||||
_ref$selectorFactory = _ref.selectorFactory,
|
||||
selectorFactory = _ref$selectorFactory === void 0 ? defaultSelectorFactory : _ref$selectorFactory;
|
||||
|
||||
return function connect(mapStateToProps, mapDispatchToProps, mergeProps, _ref2) {
|
||||
if (_ref2 === void 0) {
|
||||
_ref2 = {};
|
||||
}
|
||||
|
||||
var _ref3 = _ref2,
|
||||
_ref3$pure = _ref3.pure,
|
||||
pure = _ref3$pure === void 0 ? true : _ref3$pure,
|
||||
_ref3$areStatesEqual = _ref3.areStatesEqual,
|
||||
areStatesEqual = _ref3$areStatesEqual === void 0 ? strictEqual : _ref3$areStatesEqual,
|
||||
_ref3$areOwnPropsEqua = _ref3.areOwnPropsEqual,
|
||||
areOwnPropsEqual = _ref3$areOwnPropsEqua === void 0 ? shallowEqual : _ref3$areOwnPropsEqua,
|
||||
_ref3$areStatePropsEq = _ref3.areStatePropsEqual,
|
||||
areStatePropsEqual = _ref3$areStatePropsEq === void 0 ? shallowEqual : _ref3$areStatePropsEq,
|
||||
_ref3$areMergedPropsE = _ref3.areMergedPropsEqual,
|
||||
areMergedPropsEqual = _ref3$areMergedPropsE === void 0 ? shallowEqual : _ref3$areMergedPropsE,
|
||||
extraOptions = _objectWithoutPropertiesLoose(_ref3, ["pure", "areStatesEqual", "areOwnPropsEqual", "areStatePropsEqual", "areMergedPropsEqual"]);
|
||||
|
||||
var initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
|
||||
var initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
|
||||
var initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps');
|
||||
return connectHOC(selectorFactory, _extends({
|
||||
// used in error messages
|
||||
methodName: 'connect',
|
||||
// used to compute Connect's displayName from the wrapped component's displayName.
|
||||
getDisplayName: function getDisplayName(name) {
|
||||
return "Connect(" + name + ")";
|
||||
},
|
||||
// if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
|
||||
shouldHandleStateChanges: Boolean(mapStateToProps),
|
||||
// passed through to selectorFactory
|
||||
initMapStateToProps: initMapStateToProps,
|
||||
initMapDispatchToProps: initMapDispatchToProps,
|
||||
initMergeProps: initMergeProps,
|
||||
pure: pure,
|
||||
areStatesEqual: areStatesEqual,
|
||||
areOwnPropsEqual: areOwnPropsEqual,
|
||||
areStatePropsEqual: areStatePropsEqual,
|
||||
areMergedPropsEqual: areMergedPropsEqual
|
||||
}, extraOptions));
|
||||
};
|
||||
}
|
||||
export default
|
||||
/*#__PURE__*/
|
||||
createConnect();
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps';
|
||||
export function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
|
||||
return typeof mapDispatchToProps === 'function' ? wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps') : undefined;
|
||||
}
|
||||
export function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
|
||||
return !mapDispatchToProps ? wrapMapToPropsConstant(function (dispatch) {
|
||||
return {
|
||||
dispatch: dispatch
|
||||
};
|
||||
}) : undefined;
|
||||
}
|
||||
export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
|
||||
return mapDispatchToProps && typeof mapDispatchToProps === 'object' ? wrapMapToPropsConstant(function (dispatch) {
|
||||
return bindActionCreators(mapDispatchToProps, dispatch);
|
||||
}) : undefined;
|
||||
}
|
||||
export default [whenMapDispatchToPropsIsFunction, whenMapDispatchToPropsIsMissing, whenMapDispatchToPropsIsObject];
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps';
|
||||
export function whenMapStateToPropsIsFunction(mapStateToProps) {
|
||||
return typeof mapStateToProps === 'function' ? wrapMapToPropsFunc(mapStateToProps, 'mapStateToProps') : undefined;
|
||||
}
|
||||
export function whenMapStateToPropsIsMissing(mapStateToProps) {
|
||||
return !mapStateToProps ? wrapMapToPropsConstant(function () {
|
||||
return {};
|
||||
}) : undefined;
|
||||
}
|
||||
export default [whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing];
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import verifyPlainObject from '../utils/verifyPlainObject';
|
||||
export function defaultMergeProps(stateProps, dispatchProps, ownProps) {
|
||||
return _extends({}, ownProps, {}, stateProps, {}, dispatchProps);
|
||||
}
|
||||
export function wrapMergePropsFunc(mergeProps) {
|
||||
return function initMergePropsProxy(dispatch, _ref) {
|
||||
var displayName = _ref.displayName,
|
||||
pure = _ref.pure,
|
||||
areMergedPropsEqual = _ref.areMergedPropsEqual;
|
||||
var hasRunOnce = false;
|
||||
var mergedProps;
|
||||
return function mergePropsProxy(stateProps, dispatchProps, ownProps) {
|
||||
var nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
|
||||
if (hasRunOnce) {
|
||||
if (!pure || !areMergedPropsEqual(nextMergedProps, mergedProps)) mergedProps = nextMergedProps;
|
||||
} else {
|
||||
hasRunOnce = true;
|
||||
mergedProps = nextMergedProps;
|
||||
if (process.env.NODE_ENV !== 'production') verifyPlainObject(mergedProps, displayName, 'mergeProps');
|
||||
}
|
||||
|
||||
return mergedProps;
|
||||
};
|
||||
};
|
||||
}
|
||||
export function whenMergePropsIsFunction(mergeProps) {
|
||||
return typeof mergeProps === 'function' ? wrapMergePropsFunc(mergeProps) : undefined;
|
||||
}
|
||||
export function whenMergePropsIsOmitted(mergeProps) {
|
||||
return !mergeProps ? function () {
|
||||
return defaultMergeProps;
|
||||
} : undefined;
|
||||
}
|
||||
export default [whenMergePropsIsFunction, whenMergePropsIsOmitted];
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import verifySubselectors from './verifySubselectors';
|
||||
export function impureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch) {
|
||||
return function impureFinalPropsSelector(state, ownProps) {
|
||||
return mergeProps(mapStateToProps(state, ownProps), mapDispatchToProps(dispatch, ownProps), ownProps);
|
||||
};
|
||||
}
|
||||
export function pureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, _ref) {
|
||||
var areStatesEqual = _ref.areStatesEqual,
|
||||
areOwnPropsEqual = _ref.areOwnPropsEqual,
|
||||
areStatePropsEqual = _ref.areStatePropsEqual;
|
||||
var hasRunAtLeastOnce = false;
|
||||
var state;
|
||||
var ownProps;
|
||||
var stateProps;
|
||||
var dispatchProps;
|
||||
var mergedProps;
|
||||
|
||||
function handleFirstCall(firstState, firstOwnProps) {
|
||||
state = firstState;
|
||||
ownProps = firstOwnProps;
|
||||
stateProps = mapStateToProps(state, ownProps);
|
||||
dispatchProps = mapDispatchToProps(dispatch, ownProps);
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
hasRunAtLeastOnce = true;
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleNewPropsAndNewState() {
|
||||
stateProps = mapStateToProps(state, ownProps);
|
||||
if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleNewProps() {
|
||||
if (mapStateToProps.dependsOnOwnProps) stateProps = mapStateToProps(state, ownProps);
|
||||
if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleNewState() {
|
||||
var nextStateProps = mapStateToProps(state, ownProps);
|
||||
var statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps);
|
||||
stateProps = nextStateProps;
|
||||
if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleSubsequentCalls(nextState, nextOwnProps) {
|
||||
var propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps);
|
||||
var stateChanged = !areStatesEqual(nextState, state);
|
||||
state = nextState;
|
||||
ownProps = nextOwnProps;
|
||||
if (propsChanged && stateChanged) return handleNewPropsAndNewState();
|
||||
if (propsChanged) return handleNewProps();
|
||||
if (stateChanged) return handleNewState();
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
return function pureFinalPropsSelector(nextState, nextOwnProps) {
|
||||
return hasRunAtLeastOnce ? handleSubsequentCalls(nextState, nextOwnProps) : handleFirstCall(nextState, nextOwnProps);
|
||||
};
|
||||
} // TODO: Add more comments
|
||||
// If pure is true, the selector returned by selectorFactory will memoize its results,
|
||||
// allowing connectAdvanced's shouldComponentUpdate to return false if final
|
||||
// props have not changed. If false, the selector will always return a new
|
||||
// object and shouldComponentUpdate will always return true.
|
||||
|
||||
export default function finalPropsSelectorFactory(dispatch, _ref2) {
|
||||
var initMapStateToProps = _ref2.initMapStateToProps,
|
||||
initMapDispatchToProps = _ref2.initMapDispatchToProps,
|
||||
initMergeProps = _ref2.initMergeProps,
|
||||
options = _objectWithoutPropertiesLoose(_ref2, ["initMapStateToProps", "initMapDispatchToProps", "initMergeProps"]);
|
||||
|
||||
var mapStateToProps = initMapStateToProps(dispatch, options);
|
||||
var mapDispatchToProps = initMapDispatchToProps(dispatch, options);
|
||||
var mergeProps = initMergeProps(dispatch, options);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, options.displayName);
|
||||
}
|
||||
|
||||
var selectorFactory = options.pure ? pureFinalPropsSelectorFactory : impureFinalPropsSelectorFactory;
|
||||
return selectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, options);
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import warning from '../utils/warning';
|
||||
|
||||
function verify(selector, methodName, displayName) {
|
||||
if (!selector) {
|
||||
throw new Error("Unexpected value for " + methodName + " in " + displayName + ".");
|
||||
} else if (methodName === 'mapStateToProps' || methodName === 'mapDispatchToProps') {
|
||||
if (!Object.prototype.hasOwnProperty.call(selector, 'dependsOnOwnProps')) {
|
||||
warning("The selector for " + methodName + " of " + displayName + " did not specify a value for dependsOnOwnProps.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, displayName) {
|
||||
verify(mapStateToProps, 'mapStateToProps', displayName);
|
||||
verify(mapDispatchToProps, 'mapDispatchToProps', displayName);
|
||||
verify(mergeProps, 'mergeProps', displayName);
|
||||
}
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
import verifyPlainObject from '../utils/verifyPlainObject';
|
||||
export function wrapMapToPropsConstant(getConstant) {
|
||||
return function initConstantSelector(dispatch, options) {
|
||||
var constant = getConstant(dispatch, options);
|
||||
|
||||
function constantSelector() {
|
||||
return constant;
|
||||
}
|
||||
|
||||
constantSelector.dependsOnOwnProps = false;
|
||||
return constantSelector;
|
||||
};
|
||||
} // dependsOnOwnProps is used by createMapToPropsProxy to determine whether to pass props as args
|
||||
// to the mapToProps function being wrapped. It is also used by makePurePropsSelector to determine
|
||||
// whether mapToProps needs to be invoked when props have changed.
|
||||
//
|
||||
// A length of one signals that mapToProps does not depend on props from the parent component.
|
||||
// A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
|
||||
// therefore not reporting its length accurately..
|
||||
|
||||
export function getDependsOnOwnProps(mapToProps) {
|
||||
return mapToProps.dependsOnOwnProps !== null && mapToProps.dependsOnOwnProps !== undefined ? Boolean(mapToProps.dependsOnOwnProps) : mapToProps.length !== 1;
|
||||
} // Used by whenMapStateToPropsIsFunction and whenMapDispatchToPropsIsFunction,
|
||||
// this function wraps mapToProps in a proxy function which does several things:
|
||||
//
|
||||
// * Detects whether the mapToProps function being called depends on props, which
|
||||
// is used by selectorFactory to decide if it should reinvoke on props changes.
|
||||
//
|
||||
// * On first call, handles mapToProps if returns another function, and treats that
|
||||
// new function as the true mapToProps for subsequent calls.
|
||||
//
|
||||
// * On first call, verifies the first result is a plain object, in order to warn
|
||||
// the developer that their mapToProps function is not returning a valid result.
|
||||
//
|
||||
|
||||
export function wrapMapToPropsFunc(mapToProps, methodName) {
|
||||
return function initProxySelector(dispatch, _ref) {
|
||||
var displayName = _ref.displayName;
|
||||
|
||||
var proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
|
||||
return proxy.dependsOnOwnProps ? proxy.mapToProps(stateOrDispatch, ownProps) : proxy.mapToProps(stateOrDispatch);
|
||||
}; // allow detectFactoryAndVerify to get ownProps
|
||||
|
||||
|
||||
proxy.dependsOnOwnProps = true;
|
||||
|
||||
proxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch, ownProps) {
|
||||
proxy.mapToProps = mapToProps;
|
||||
proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps);
|
||||
var props = proxy(stateOrDispatch, ownProps);
|
||||
|
||||
if (typeof props === 'function') {
|
||||
proxy.mapToProps = props;
|
||||
proxy.dependsOnOwnProps = getDependsOnOwnProps(props);
|
||||
props = proxy(stateOrDispatch, ownProps);
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') verifyPlainObject(props, displayName, methodName);
|
||||
return props;
|
||||
};
|
||||
|
||||
return proxy;
|
||||
};
|
||||
}
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
import { ReactReduxContext } from '../components/Context';
|
||||
import { useStore as useDefaultStore, createStoreHook } from './useStore';
|
||||
/**
|
||||
* Hook factory, which creates a `useDispatch` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useDispatch` hook bound to the specified context.
|
||||
*/
|
||||
|
||||
export function createDispatchHook(context) {
|
||||
if (context === void 0) {
|
||||
context = ReactReduxContext;
|
||||
}
|
||||
|
||||
var useStore = context === ReactReduxContext ? useDefaultStore : createStoreHook(context);
|
||||
return function useDispatch() {
|
||||
var store = useStore();
|
||||
return store.dispatch;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* A hook to access the redux `dispatch` function.
|
||||
*
|
||||
* @returns {any|function} redux store's `dispatch` function
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React, { useCallback } from 'react'
|
||||
* import { useDispatch } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = ({ value }) => {
|
||||
* const dispatch = useDispatch()
|
||||
* const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
|
||||
* return (
|
||||
* <div>
|
||||
* <span>{value}</span>
|
||||
* <button onClick={increaseCounter}>Increase counter</button>
|
||||
* </div>
|
||||
* )
|
||||
* }
|
||||
*/
|
||||
|
||||
export var useDispatch =
|
||||
/*#__PURE__*/
|
||||
createDispatchHook();
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useContext } from 'react';
|
||||
import { ReactReduxContext } from '../components/Context';
|
||||
/**
|
||||
* A hook to access the value of the `ReactReduxContext`. This is a low-level
|
||||
* hook that you should usually not need to call directly.
|
||||
*
|
||||
* @returns {any} the value of the `ReactReduxContext`
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useReduxContext } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = ({ value }) => {
|
||||
* const { store } = useReduxContext()
|
||||
* return <div>{store.getState()}</div>
|
||||
* }
|
||||
*/
|
||||
|
||||
export function useReduxContext() {
|
||||
var contextValue = useContext(ReactReduxContext);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !contextValue) {
|
||||
throw new Error('could not find react-redux context value; please ensure the component is wrapped in a <Provider>');
|
||||
}
|
||||
|
||||
return contextValue;
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
import { useReducer, useRef, useMemo, useContext } from 'react';
|
||||
import { useReduxContext as useDefaultReduxContext } from './useReduxContext';
|
||||
import Subscription from '../utils/Subscription';
|
||||
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';
|
||||
import { ReactReduxContext } from '../components/Context';
|
||||
|
||||
var refEquality = function refEquality(a, b) {
|
||||
return a === b;
|
||||
};
|
||||
|
||||
function useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {
|
||||
var _useReducer = useReducer(function (s) {
|
||||
return s + 1;
|
||||
}, 0),
|
||||
forceRender = _useReducer[1];
|
||||
|
||||
var subscription = useMemo(function () {
|
||||
return new Subscription(store, contextSub);
|
||||
}, [store, contextSub]);
|
||||
var latestSubscriptionCallbackError = useRef();
|
||||
var latestSelector = useRef();
|
||||
var latestSelectedState = useRef();
|
||||
var selectedState;
|
||||
|
||||
try {
|
||||
if (selector !== latestSelector.current || latestSubscriptionCallbackError.current) {
|
||||
selectedState = selector(store.getState());
|
||||
} else {
|
||||
selectedState = latestSelectedState.current;
|
||||
}
|
||||
} catch (err) {
|
||||
if (latestSubscriptionCallbackError.current) {
|
||||
err.message += "\nThe error may be correlated with this previous error:\n" + latestSubscriptionCallbackError.current.stack + "\n\n";
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
latestSelector.current = selector;
|
||||
latestSelectedState.current = selectedState;
|
||||
latestSubscriptionCallbackError.current = undefined;
|
||||
});
|
||||
useIsomorphicLayoutEffect(function () {
|
||||
function checkForUpdates() {
|
||||
try {
|
||||
var newSelectedState = latestSelector.current(store.getState());
|
||||
|
||||
if (equalityFn(newSelectedState, latestSelectedState.current)) {
|
||||
return;
|
||||
}
|
||||
|
||||
latestSelectedState.current = newSelectedState;
|
||||
} catch (err) {
|
||||
// we ignore all errors here, since when the component
|
||||
// is re-rendered, the selectors are called again, and
|
||||
// will throw again, if neither props nor store state
|
||||
// changed
|
||||
latestSubscriptionCallbackError.current = err;
|
||||
}
|
||||
|
||||
forceRender({});
|
||||
}
|
||||
|
||||
subscription.onStateChange = checkForUpdates;
|
||||
subscription.trySubscribe();
|
||||
checkForUpdates();
|
||||
return function () {
|
||||
return subscription.tryUnsubscribe();
|
||||
};
|
||||
}, [store, subscription]);
|
||||
return selectedState;
|
||||
}
|
||||
/**
|
||||
* Hook factory, which creates a `useSelector` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useSelector` hook bound to the specified context.
|
||||
*/
|
||||
|
||||
|
||||
export function createSelectorHook(context) {
|
||||
if (context === void 0) {
|
||||
context = ReactReduxContext;
|
||||
}
|
||||
|
||||
var useReduxContext = context === ReactReduxContext ? useDefaultReduxContext : function () {
|
||||
return useContext(context);
|
||||
};
|
||||
return function useSelector(selector, equalityFn) {
|
||||
if (equalityFn === void 0) {
|
||||
equalityFn = refEquality;
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !selector) {
|
||||
throw new Error("You must pass a selector to useSelectors");
|
||||
}
|
||||
|
||||
var _useReduxContext = useReduxContext(),
|
||||
store = _useReduxContext.store,
|
||||
contextSub = _useReduxContext.subscription;
|
||||
|
||||
return useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* A hook to access the redux store's state. This hook takes a selector function
|
||||
* as an argument. The selector is called with the store state.
|
||||
*
|
||||
* This hook takes an optional equality comparison function as the second parameter
|
||||
* that allows you to customize the way the selected state is compared to determine
|
||||
* whether the component needs to be re-rendered.
|
||||
*
|
||||
* @param {Function} selector the selector function
|
||||
* @param {Function=} equalityFn the function that will be used to determine equality
|
||||
*
|
||||
* @returns {any} the selected state
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useSelector } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = () => {
|
||||
* const counter = useSelector(state => state.counter)
|
||||
* return <div>{counter}</div>
|
||||
* }
|
||||
*/
|
||||
|
||||
export var useSelector =
|
||||
/*#__PURE__*/
|
||||
createSelectorHook();
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
import { useContext } from 'react';
|
||||
import { ReactReduxContext } from '../components/Context';
|
||||
import { useReduxContext as useDefaultReduxContext } from './useReduxContext';
|
||||
/**
|
||||
* Hook factory, which creates a `useStore` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useStore` hook bound to the specified context.
|
||||
*/
|
||||
|
||||
export function createStoreHook(context) {
|
||||
if (context === void 0) {
|
||||
context = ReactReduxContext;
|
||||
}
|
||||
|
||||
var useReduxContext = context === ReactReduxContext ? useDefaultReduxContext : function () {
|
||||
return useContext(context);
|
||||
};
|
||||
return function useStore() {
|
||||
var _useReduxContext = useReduxContext(),
|
||||
store = _useReduxContext.store;
|
||||
|
||||
return store;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* A hook to access the redux store.
|
||||
*
|
||||
* @returns {any} the redux store
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useStore } from 'react-redux'
|
||||
*
|
||||
* export const ExampleComponent = () => {
|
||||
* const store = useStore()
|
||||
* return <div>{store.getState()}</div>
|
||||
* }
|
||||
*/
|
||||
|
||||
export var useStore =
|
||||
/*#__PURE__*/
|
||||
createStoreHook();
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import Provider from './components/Provider';
|
||||
import connectAdvanced from './components/connectAdvanced';
|
||||
import { ReactReduxContext } from './components/Context';
|
||||
import connect from './connect/connect';
|
||||
import { useDispatch, createDispatchHook } from './hooks/useDispatch';
|
||||
import { useSelector, createSelectorHook } from './hooks/useSelector';
|
||||
import { useStore, createStoreHook } from './hooks/useStore';
|
||||
import { setBatch } from './utils/batch';
|
||||
import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';
|
||||
import shallowEqual from './utils/shallowEqual';
|
||||
setBatch(batch);
|
||||
export { Provider, connectAdvanced, ReactReduxContext, connect, batch, useDispatch, createDispatchHook, useSelector, createSelectorHook, useStore, createStoreHook, shallowEqual };
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
import { getBatch } from './batch'; // encapsulates the subscription logic for connecting a component to the redux store, as
|
||||
// well as nesting subscriptions of descendant components, so that we can ensure the
|
||||
// ancestor components re-render before descendants
|
||||
|
||||
var nullListeners = {
|
||||
notify: function notify() {}
|
||||
};
|
||||
|
||||
function createListenerCollection() {
|
||||
var batch = getBatch();
|
||||
var first = null;
|
||||
var last = null;
|
||||
return {
|
||||
clear: function clear() {
|
||||
first = null;
|
||||
last = null;
|
||||
},
|
||||
notify: function notify() {
|
||||
batch(function () {
|
||||
var listener = first;
|
||||
|
||||
while (listener) {
|
||||
listener.callback();
|
||||
listener = listener.next;
|
||||
}
|
||||
});
|
||||
},
|
||||
get: function get() {
|
||||
var listeners = [];
|
||||
var listener = first;
|
||||
|
||||
while (listener) {
|
||||
listeners.push(listener);
|
||||
listener = listener.next;
|
||||
}
|
||||
|
||||
return listeners;
|
||||
},
|
||||
subscribe: function subscribe(callback) {
|
||||
var isSubscribed = true;
|
||||
var listener = last = {
|
||||
callback: callback,
|
||||
next: null,
|
||||
prev: last
|
||||
};
|
||||
|
||||
if (listener.prev) {
|
||||
listener.prev.next = listener;
|
||||
} else {
|
||||
first = listener;
|
||||
}
|
||||
|
||||
return function unsubscribe() {
|
||||
if (!isSubscribed || first === null) return;
|
||||
isSubscribed = false;
|
||||
|
||||
if (listener.next) {
|
||||
listener.next.prev = listener.prev;
|
||||
} else {
|
||||
last = listener.prev;
|
||||
}
|
||||
|
||||
if (listener.prev) {
|
||||
listener.prev.next = listener.next;
|
||||
} else {
|
||||
first = listener.next;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var Subscription =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Subscription(store, parentSub) {
|
||||
this.store = store;
|
||||
this.parentSub = parentSub;
|
||||
this.unsubscribe = null;
|
||||
this.listeners = nullListeners;
|
||||
this.handleChangeWrapper = this.handleChangeWrapper.bind(this);
|
||||
}
|
||||
|
||||
var _proto = Subscription.prototype;
|
||||
|
||||
_proto.addNestedSub = function addNestedSub(listener) {
|
||||
this.trySubscribe();
|
||||
return this.listeners.subscribe(listener);
|
||||
};
|
||||
|
||||
_proto.notifyNestedSubs = function notifyNestedSubs() {
|
||||
this.listeners.notify();
|
||||
};
|
||||
|
||||
_proto.handleChangeWrapper = function handleChangeWrapper() {
|
||||
if (this.onStateChange) {
|
||||
this.onStateChange();
|
||||
}
|
||||
};
|
||||
|
||||
_proto.isSubscribed = function isSubscribed() {
|
||||
return Boolean(this.unsubscribe);
|
||||
};
|
||||
|
||||
_proto.trySubscribe = function trySubscribe() {
|
||||
if (!this.unsubscribe) {
|
||||
this.unsubscribe = this.parentSub ? this.parentSub.addNestedSub(this.handleChangeWrapper) : this.store.subscribe(this.handleChangeWrapper);
|
||||
this.listeners = createListenerCollection();
|
||||
}
|
||||
};
|
||||
|
||||
_proto.tryUnsubscribe = function tryUnsubscribe() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
this.unsubscribe = null;
|
||||
this.listeners.clear();
|
||||
this.listeners = nullListeners;
|
||||
}
|
||||
};
|
||||
|
||||
return Subscription;
|
||||
}();
|
||||
|
||||
export { Subscription as default };
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// Default to a dummy "batch" implementation that just runs the callback
|
||||
function defaultNoopBatch(callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
var batch = defaultNoopBatch; // Allow injecting another batching function later
|
||||
|
||||
export var setBatch = function setBatch(newBatch) {
|
||||
return batch = newBatch;
|
||||
}; // Supply a getter just to skip dealing with ESM bindings
|
||||
|
||||
export var getBatch = function getBatch() {
|
||||
return batch;
|
||||
};
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @param {any} obj The object to inspect.
|
||||
* @returns {boolean} True if the argument appears to be a plain object.
|
||||
*/
|
||||
export default function isPlainObject(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) return false;
|
||||
var proto = Object.getPrototypeOf(obj);
|
||||
if (proto === null) return true;
|
||||
var baseProto = proto;
|
||||
|
||||
while (Object.getPrototypeOf(baseProto) !== null) {
|
||||
baseProto = Object.getPrototypeOf(baseProto);
|
||||
}
|
||||
|
||||
return proto === baseProto;
|
||||
}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
/* eslint-disable import/no-unresolved */
|
||||
export { unstable_batchedUpdates } from 'react-dom';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
/* eslint-disable import/no-unresolved */
|
||||
import { unstable_batchedUpdates } from 'react-native';
|
||||
export { unstable_batchedUpdates };
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
function is(x, y) {
|
||||
if (x === y) {
|
||||
return x !== 0 || y !== 0 || 1 / x === 1 / y;
|
||||
} else {
|
||||
return x !== x && y !== y;
|
||||
}
|
||||
}
|
||||
|
||||
export default function shallowEqual(objA, objB) {
|
||||
if (is(objA, objB)) return true;
|
||||
|
||||
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var keysA = Object.keys(objA);
|
||||
var keysB = Object.keys(objB);
|
||||
if (keysA.length !== keysB.length) return false;
|
||||
|
||||
for (var i = 0; i < keysA.length; i++) {
|
||||
if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import { useEffect, useLayoutEffect } from 'react'; // React currently throws a warning when using useLayoutEffect on the server.
|
||||
// To get around it, we can conditionally useEffect on the server (no-op) and
|
||||
// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
|
||||
// subscription callback always has the selector from the latest render commit
|
||||
// available, otherwise a store update may happen between render and the effect,
|
||||
// which may cause missed updates; we also must ensure the store subscription
|
||||
// is created synchronously, otherwise a store update may occur before the
|
||||
// subscription is created and an inconsistent state may be observed
|
||||
|
||||
export var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import { useLayoutEffect } from 'react'; // Under React Native, we know that we always want to use useLayoutEffect
|
||||
|
||||
export var useIsomorphicLayoutEffect = useLayoutEffect;
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import isPlainObject from './isPlainObject';
|
||||
import warning from './warning';
|
||||
export default function verifyPlainObject(value, displayName, methodName) {
|
||||
if (!isPlainObject(value)) {
|
||||
warning(methodName + "() in " + displayName + " must return a plain object. Instead received " + value + ".");
|
||||
}
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Prints a warning in the console if it exists.
|
||||
*
|
||||
* @param {String} message The warning message.
|
||||
* @returns {void}
|
||||
*/
|
||||
export default function warning(message) {
|
||||
/* eslint-disable no-console */
|
||||
if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
||||
console.error(message);
|
||||
}
|
||||
/* eslint-enable no-console */
|
||||
|
||||
|
||||
try {
|
||||
// This error was thrown as a convenience so that if you enable
|
||||
// "break on all exceptions" in your console,
|
||||
// it would pause the execution at this line.
|
||||
throw new Error(message);
|
||||
/* eslint-disable no-empty */
|
||||
} catch (e) {}
|
||||
/* eslint-enable no-empty */
|
||||
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { bindActionCreators } from 'redux';
|
||||
export default function wrapActionCreators(actionCreators) {
|
||||
return function (dispatch) {
|
||||
return bindActionCreators(actionCreators, dispatch);
|
||||
};
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.batch = void 0;
|
||||
|
||||
var _Provider = _interopRequireDefault(require("./components/Provider"));
|
||||
|
||||
exports.Provider = _Provider["default"];
|
||||
|
||||
var _connectAdvanced = _interopRequireDefault(require("./components/connectAdvanced"));
|
||||
|
||||
exports.connectAdvanced = _connectAdvanced["default"];
|
||||
|
||||
var _Context = require("./components/Context");
|
||||
|
||||
exports.ReactReduxContext = _Context.ReactReduxContext;
|
||||
|
||||
var _connect = _interopRequireDefault(require("./connect/connect"));
|
||||
|
||||
exports.connect = _connect["default"];
|
||||
|
||||
var _useDispatch = require("./hooks/useDispatch");
|
||||
|
||||
exports.useDispatch = _useDispatch.useDispatch;
|
||||
|
||||
var _useSelector = require("./hooks/useSelector");
|
||||
|
||||
exports.useSelector = _useSelector.useSelector;
|
||||
|
||||
var _useStore = require("./hooks/useStore");
|
||||
|
||||
exports.useStore = _useStore.useStore;
|
||||
|
||||
var _batch = require("./utils/batch");
|
||||
|
||||
var _shallowEqual = _interopRequireDefault(require("./utils/shallowEqual"));
|
||||
|
||||
exports.shallowEqual = _shallowEqual["default"];
|
||||
// For other renderers besides ReactDOM and React Native, use the default noop batch function
|
||||
var batch = (0, _batch.getBatch)();
|
||||
exports.batch = batch;
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = exports.ReactReduxContext = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var ReactReduxContext =
|
||||
/*#__PURE__*/
|
||||
_react["default"].createContext(null);
|
||||
|
||||
exports.ReactReduxContext = ReactReduxContext;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
ReactReduxContext.displayName = 'ReactRedux';
|
||||
}
|
||||
|
||||
var _default = ReactReduxContext;
|
||||
exports["default"] = _default;
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _Context = require("./Context");
|
||||
|
||||
var _Subscription = _interopRequireDefault(require("../utils/Subscription"));
|
||||
|
||||
function Provider(_ref) {
|
||||
var store = _ref.store,
|
||||
context = _ref.context,
|
||||
children = _ref.children;
|
||||
var contextValue = (0, _react.useMemo)(function () {
|
||||
var subscription = new _Subscription["default"](store);
|
||||
subscription.onStateChange = subscription.notifyNestedSubs;
|
||||
return {
|
||||
store: store,
|
||||
subscription: subscription
|
||||
};
|
||||
}, [store]);
|
||||
var previousState = (0, _react.useMemo)(function () {
|
||||
return store.getState();
|
||||
}, [store]);
|
||||
(0, _react.useEffect)(function () {
|
||||
var subscription = contextValue.subscription;
|
||||
subscription.trySubscribe();
|
||||
|
||||
if (previousState !== store.getState()) {
|
||||
subscription.notifyNestedSubs();
|
||||
}
|
||||
|
||||
return function () {
|
||||
subscription.tryUnsubscribe();
|
||||
subscription.onStateChange = null;
|
||||
};
|
||||
}, [contextValue, previousState]);
|
||||
var Context = context || _Context.ReactReduxContext;
|
||||
return _react["default"].createElement(Context.Provider, {
|
||||
value: contextValue
|
||||
}, children);
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Provider.propTypes = {
|
||||
store: _propTypes["default"].shape({
|
||||
subscribe: _propTypes["default"].func.isRequired,
|
||||
dispatch: _propTypes["default"].func.isRequired,
|
||||
getState: _propTypes["default"].func.isRequired
|
||||
}),
|
||||
context: _propTypes["default"].object,
|
||||
children: _propTypes["default"].any
|
||||
};
|
||||
}
|
||||
|
||||
var _default = Provider;
|
||||
exports["default"] = _default;
|
||||
+384
@@ -0,0 +1,384 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = connectAdvanced;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
||||
|
||||
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
|
||||
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _reactIs = require("react-is");
|
||||
|
||||
var _Subscription = _interopRequireDefault(require("../utils/Subscription"));
|
||||
|
||||
var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
||||
|
||||
var _Context = require("./Context");
|
||||
|
||||
// Define some constant arrays just to avoid re-creating these
|
||||
var EMPTY_ARRAY = [];
|
||||
var NO_SUBSCRIPTION_ARRAY = [null, null];
|
||||
|
||||
var stringifyComponent = function stringifyComponent(Comp) {
|
||||
try {
|
||||
return JSON.stringify(Comp);
|
||||
} catch (err) {
|
||||
return String(Comp);
|
||||
}
|
||||
};
|
||||
|
||||
function storeStateUpdatesReducer(state, action) {
|
||||
var updateCount = state[1];
|
||||
return [action.payload, updateCount + 1];
|
||||
}
|
||||
|
||||
function useIsomorphicLayoutEffectWithArgs(effectFunc, effectArgs, dependencies) {
|
||||
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
||||
return effectFunc.apply(void 0, effectArgs);
|
||||
}, dependencies);
|
||||
}
|
||||
|
||||
function captureWrapperProps(lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs) {
|
||||
// We want to capture the wrapper props and child props we used for later comparisons
|
||||
lastWrapperProps.current = wrapperProps;
|
||||
lastChildProps.current = actualChildProps;
|
||||
renderIsScheduled.current = false; // If the render was from a store update, clear out that reference and cascade the subscriber update
|
||||
|
||||
if (childPropsFromStoreUpdate.current) {
|
||||
childPropsFromStoreUpdate.current = null;
|
||||
notifyNestedSubs();
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeUpdates(shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch) {
|
||||
// If we're not subscribed to the store, nothing to do here
|
||||
if (!shouldHandleStateChanges) return; // Capture values for checking if and when this component unmounts
|
||||
|
||||
var didUnsubscribe = false;
|
||||
var lastThrownError = null; // We'll run this callback every time a store subscription update propagates to this component
|
||||
|
||||
var checkForUpdates = function checkForUpdates() {
|
||||
if (didUnsubscribe) {
|
||||
// Don't run stale listeners.
|
||||
// Redux doesn't guarantee unsubscriptions happen until next dispatch.
|
||||
return;
|
||||
}
|
||||
|
||||
var latestStoreState = store.getState();
|
||||
var newChildProps, error;
|
||||
|
||||
try {
|
||||
// Actually run the selector with the most recent store state and wrapper props
|
||||
// to determine what the child props should be
|
||||
newChildProps = childPropsSelector(latestStoreState, lastWrapperProps.current);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
lastThrownError = e;
|
||||
}
|
||||
|
||||
if (!error) {
|
||||
lastThrownError = null;
|
||||
} // If the child props haven't changed, nothing to do here - cascade the subscription update
|
||||
|
||||
|
||||
if (newChildProps === lastChildProps.current) {
|
||||
if (!renderIsScheduled.current) {
|
||||
notifyNestedSubs();
|
||||
}
|
||||
} else {
|
||||
// Save references to the new child props. Note that we track the "child props from store update"
|
||||
// as a ref instead of a useState/useReducer because we need a way to determine if that value has
|
||||
// been processed. If this went into useState/useReducer, we couldn't clear out the value without
|
||||
// forcing another re-render, which we don't want.
|
||||
lastChildProps.current = newChildProps;
|
||||
childPropsFromStoreUpdate.current = newChildProps;
|
||||
renderIsScheduled.current = true; // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
|
||||
|
||||
forceComponentUpdateDispatch({
|
||||
type: 'STORE_UPDATED',
|
||||
payload: {
|
||||
error: error
|
||||
}
|
||||
});
|
||||
}
|
||||
}; // Actually subscribe to the nearest connected ancestor (or store)
|
||||
|
||||
|
||||
subscription.onStateChange = checkForUpdates;
|
||||
subscription.trySubscribe(); // Pull data from the store after first render in case the store has
|
||||
// changed since we began.
|
||||
|
||||
checkForUpdates();
|
||||
|
||||
var unsubscribeWrapper = function unsubscribeWrapper() {
|
||||
didUnsubscribe = true;
|
||||
subscription.tryUnsubscribe();
|
||||
subscription.onStateChange = null;
|
||||
|
||||
if (lastThrownError) {
|
||||
// It's possible that we caught an error due to a bad mapState function, but the
|
||||
// parent re-rendered without this component and we're about to unmount.
|
||||
// This shouldn't happen as long as we do top-down subscriptions correctly, but
|
||||
// if we ever do those wrong, this throw will surface the error in our tests.
|
||||
// In that case, throw the error from here so it doesn't get lost.
|
||||
throw lastThrownError;
|
||||
}
|
||||
};
|
||||
|
||||
return unsubscribeWrapper;
|
||||
}
|
||||
|
||||
var initStateUpdates = function initStateUpdates() {
|
||||
return [null, 0];
|
||||
};
|
||||
|
||||
function connectAdvanced(
|
||||
/*
|
||||
selectorFactory is a func that is responsible for returning the selector function used to
|
||||
compute new props from state, props, and dispatch. For example:
|
||||
export default connectAdvanced((dispatch, options) => (state, props) => ({
|
||||
thing: state.things[props.thingId],
|
||||
saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
|
||||
}))(YourComponent)
|
||||
Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
|
||||
outside of their selector as an optimization. Options passed to connectAdvanced are passed to
|
||||
the selectorFactory, along with displayName and WrappedComponent, as the second argument.
|
||||
Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
|
||||
props. Do not use connectAdvanced directly without memoizing results between calls to your
|
||||
selector, otherwise the Connect component will re-render on every state or props change.
|
||||
*/
|
||||
selectorFactory, // options object:
|
||||
_ref) {
|
||||
if (_ref === void 0) {
|
||||
_ref = {};
|
||||
}
|
||||
|
||||
var _ref2 = _ref,
|
||||
_ref2$getDisplayName = _ref2.getDisplayName,
|
||||
getDisplayName = _ref2$getDisplayName === void 0 ? function (name) {
|
||||
return "ConnectAdvanced(" + name + ")";
|
||||
} : _ref2$getDisplayName,
|
||||
_ref2$methodName = _ref2.methodName,
|
||||
methodName = _ref2$methodName === void 0 ? 'connectAdvanced' : _ref2$methodName,
|
||||
_ref2$renderCountProp = _ref2.renderCountProp,
|
||||
renderCountProp = _ref2$renderCountProp === void 0 ? undefined : _ref2$renderCountProp,
|
||||
_ref2$shouldHandleSta = _ref2.shouldHandleStateChanges,
|
||||
shouldHandleStateChanges = _ref2$shouldHandleSta === void 0 ? true : _ref2$shouldHandleSta,
|
||||
_ref2$storeKey = _ref2.storeKey,
|
||||
storeKey = _ref2$storeKey === void 0 ? 'store' : _ref2$storeKey,
|
||||
_ref2$withRef = _ref2.withRef,
|
||||
withRef = _ref2$withRef === void 0 ? false : _ref2$withRef,
|
||||
_ref2$forwardRef = _ref2.forwardRef,
|
||||
forwardRef = _ref2$forwardRef === void 0 ? false : _ref2$forwardRef,
|
||||
_ref2$context = _ref2.context,
|
||||
context = _ref2$context === void 0 ? _Context.ReactReduxContext : _ref2$context,
|
||||
connectOptions = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef", "forwardRef", "context"]);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (renderCountProp !== undefined) {
|
||||
throw new Error("renderCountProp is removed. render counting is built into the latest React Dev Tools profiling extension");
|
||||
}
|
||||
|
||||
if (withRef) {
|
||||
throw new Error('withRef is removed. To access the wrapped instance, use a ref on the connected component');
|
||||
}
|
||||
|
||||
var customStoreWarningMessage = 'To use a custom Redux store for specific components, create a custom React context with ' + "React.createContext(), and pass the context object to React Redux's Provider and specific components" + ' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' + 'You may also pass a {context : MyContext} option to connect';
|
||||
|
||||
if (storeKey !== 'store') {
|
||||
throw new Error('storeKey has been removed and does not do anything. ' + customStoreWarningMessage);
|
||||
}
|
||||
}
|
||||
|
||||
var Context = context;
|
||||
return function wrapWithConnect(WrappedComponent) {
|
||||
if (process.env.NODE_ENV !== 'production' && !(0, _reactIs.isValidElementType)(WrappedComponent)) {
|
||||
throw new Error("You must pass a component to the function returned by " + (methodName + ". Instead received " + stringifyComponent(WrappedComponent)));
|
||||
}
|
||||
|
||||
var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
|
||||
var displayName = getDisplayName(wrappedComponentName);
|
||||
var selectorFactoryOptions = (0, _extends2["default"])({}, connectOptions, {
|
||||
getDisplayName: getDisplayName,
|
||||
methodName: methodName,
|
||||
renderCountProp: renderCountProp,
|
||||
shouldHandleStateChanges: shouldHandleStateChanges,
|
||||
storeKey: storeKey,
|
||||
displayName: displayName,
|
||||
wrappedComponentName: wrappedComponentName,
|
||||
WrappedComponent: WrappedComponent
|
||||
});
|
||||
var pure = connectOptions.pure;
|
||||
|
||||
function createChildSelector(store) {
|
||||
return selectorFactory(store.dispatch, selectorFactoryOptions);
|
||||
} // If we aren't running in "pure" mode, we don't want to memoize values.
|
||||
// To avoid conditionally calling hooks, we fall back to a tiny wrapper
|
||||
// that just executes the given callback immediately.
|
||||
|
||||
|
||||
var usePureOnlyMemo = pure ? _react.useMemo : function (callback) {
|
||||
return callback();
|
||||
};
|
||||
|
||||
function ConnectFunction(props) {
|
||||
var _useMemo = (0, _react.useMemo)(function () {
|
||||
// Distinguish between actual "data" props that were passed to the wrapper component,
|
||||
// and values needed to control behavior (forwarded refs, alternate context instances).
|
||||
// To maintain the wrapperProps object reference, memoize this destructuring.
|
||||
var forwardedRef = props.forwardedRef,
|
||||
wrapperProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["forwardedRef"]);
|
||||
return [props.context, forwardedRef, wrapperProps];
|
||||
}, [props]),
|
||||
propsContext = _useMemo[0],
|
||||
forwardedRef = _useMemo[1],
|
||||
wrapperProps = _useMemo[2];
|
||||
|
||||
var ContextToUse = (0, _react.useMemo)(function () {
|
||||
// Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
|
||||
// Memoize the check that determines which context instance we should use.
|
||||
return propsContext && propsContext.Consumer && (0, _reactIs.isContextConsumer)(_react["default"].createElement(propsContext.Consumer, null)) ? propsContext : Context;
|
||||
}, [propsContext, Context]); // Retrieve the store and ancestor subscription via context, if available
|
||||
|
||||
var contextValue = (0, _react.useContext)(ContextToUse); // The store _must_ exist as either a prop or in context.
|
||||
// We'll check to see if it _looks_ like a Redux store first.
|
||||
// This allows us to pass through a `store` prop that is just a plain value.
|
||||
|
||||
var didStoreComeFromProps = Boolean(props.store) && Boolean(props.store.getState) && Boolean(props.store.dispatch);
|
||||
var didStoreComeFromContext = Boolean(contextValue) && Boolean(contextValue.store);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !didStoreComeFromProps && !didStoreComeFromContext) {
|
||||
throw new Error("Could not find \"store\" in the context of " + ("\"" + displayName + "\". Either wrap the root component in a <Provider>, ") + "or pass a custom React context provider to <Provider> and the corresponding " + ("React context consumer to " + displayName + " in connect options."));
|
||||
} // Based on the previous check, one of these must be true
|
||||
|
||||
|
||||
var store = didStoreComeFromProps ? props.store : contextValue.store;
|
||||
var childPropsSelector = (0, _react.useMemo)(function () {
|
||||
// The child props selector needs the store reference as an input.
|
||||
// Re-create this selector whenever the store changes.
|
||||
return createChildSelector(store);
|
||||
}, [store]);
|
||||
|
||||
var _useMemo2 = (0, _react.useMemo)(function () {
|
||||
if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY; // This Subscription's source should match where store came from: props vs. context. A component
|
||||
// connected to the store via props shouldn't use subscription from context, or vice versa.
|
||||
|
||||
var subscription = new _Subscription["default"](store, didStoreComeFromProps ? null : contextValue.subscription); // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
|
||||
// the middle of the notification loop, where `subscription` will then be null. This can
|
||||
// probably be avoided if Subscription's listeners logic is changed to not call listeners
|
||||
// that have been unsubscribed in the middle of the notification loop.
|
||||
|
||||
var notifyNestedSubs = subscription.notifyNestedSubs.bind(subscription);
|
||||
return [subscription, notifyNestedSubs];
|
||||
}, [store, didStoreComeFromProps, contextValue]),
|
||||
subscription = _useMemo2[0],
|
||||
notifyNestedSubs = _useMemo2[1]; // Determine what {store, subscription} value should be put into nested context, if necessary,
|
||||
// and memoize that value to avoid unnecessary context updates.
|
||||
|
||||
|
||||
var overriddenContextValue = (0, _react.useMemo)(function () {
|
||||
if (didStoreComeFromProps) {
|
||||
// This component is directly subscribed to a store from props.
|
||||
// We don't want descendants reading from this store - pass down whatever
|
||||
// the existing context value is from the nearest connected ancestor.
|
||||
return contextValue;
|
||||
} // Otherwise, put this component's subscription instance into context, so that
|
||||
// connected descendants won't update until after this component is done
|
||||
|
||||
|
||||
return (0, _extends2["default"])({}, contextValue, {
|
||||
subscription: subscription
|
||||
});
|
||||
}, [didStoreComeFromProps, contextValue, subscription]); // We need to force this wrapper component to re-render whenever a Redux store update
|
||||
// causes a change to the calculated child component props (or we caught an error in mapState)
|
||||
|
||||
var _useReducer = (0, _react.useReducer)(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates),
|
||||
_useReducer$ = _useReducer[0],
|
||||
previousStateUpdateResult = _useReducer$[0],
|
||||
forceComponentUpdateDispatch = _useReducer[1]; // Propagate any mapState/mapDispatch errors upwards
|
||||
|
||||
|
||||
if (previousStateUpdateResult && previousStateUpdateResult.error) {
|
||||
throw previousStateUpdateResult.error;
|
||||
} // Set up refs to coordinate values between the subscription effect and the render logic
|
||||
|
||||
|
||||
var lastChildProps = (0, _react.useRef)();
|
||||
var lastWrapperProps = (0, _react.useRef)(wrapperProps);
|
||||
var childPropsFromStoreUpdate = (0, _react.useRef)();
|
||||
var renderIsScheduled = (0, _react.useRef)(false);
|
||||
var actualChildProps = usePureOnlyMemo(function () {
|
||||
// Tricky logic here:
|
||||
// - This render may have been triggered by a Redux store update that produced new child props
|
||||
// - However, we may have gotten new wrapper props after that
|
||||
// If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
|
||||
// But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
|
||||
// So, we'll use the child props from store update only if the wrapper props are the same as last time.
|
||||
if (childPropsFromStoreUpdate.current && wrapperProps === lastWrapperProps.current) {
|
||||
return childPropsFromStoreUpdate.current;
|
||||
} // TODO We're reading the store directly in render() here. Bad idea?
|
||||
// This will likely cause Bad Things (TM) to happen in Concurrent Mode.
|
||||
// Note that we do this because on renders _not_ caused by store updates, we need the latest store state
|
||||
// to determine what the child props should be.
|
||||
|
||||
|
||||
return childPropsSelector(store.getState(), wrapperProps);
|
||||
}, [store, previousStateUpdateResult, wrapperProps]); // We need this to execute synchronously every time we re-render. However, React warns
|
||||
// about useLayoutEffect in SSR, so we try to detect environment and fall back to
|
||||
// just useEffect instead to avoid the warning, since neither will run anyway.
|
||||
|
||||
useIsomorphicLayoutEffectWithArgs(captureWrapperProps, [lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs]); // Our re-subscribe logic only runs when the store/subscription setup changes
|
||||
|
||||
useIsomorphicLayoutEffectWithArgs(subscribeUpdates, [shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch], [store, subscription, childPropsSelector]); // Now that all that's done, we can finally try to actually render the child component.
|
||||
// We memoize the elements for the rendered child component as an optimization.
|
||||
|
||||
var renderedWrappedComponent = (0, _react.useMemo)(function () {
|
||||
return _react["default"].createElement(WrappedComponent, (0, _extends2["default"])({}, actualChildProps, {
|
||||
ref: forwardedRef
|
||||
}));
|
||||
}, [forwardedRef, WrappedComponent, actualChildProps]); // If React sees the exact same element reference as last time, it bails out of re-rendering
|
||||
// that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
|
||||
|
||||
var renderedChild = (0, _react.useMemo)(function () {
|
||||
if (shouldHandleStateChanges) {
|
||||
// If this component is subscribed to store updates, we need to pass its own
|
||||
// subscription instance down to our descendants. That means rendering the same
|
||||
// Context instance, and putting a different value into the context.
|
||||
return _react["default"].createElement(ContextToUse.Provider, {
|
||||
value: overriddenContextValue
|
||||
}, renderedWrappedComponent);
|
||||
}
|
||||
|
||||
return renderedWrappedComponent;
|
||||
}, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);
|
||||
return renderedChild;
|
||||
} // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
|
||||
|
||||
|
||||
var Connect = pure ? _react["default"].memo(ConnectFunction) : ConnectFunction;
|
||||
Connect.WrappedComponent = WrappedComponent;
|
||||
Connect.displayName = displayName;
|
||||
|
||||
if (forwardRef) {
|
||||
var forwarded = _react["default"].forwardRef(function forwardConnectRef(props, ref) {
|
||||
return _react["default"].createElement(Connect, (0, _extends2["default"])({}, props, {
|
||||
forwardedRef: ref
|
||||
}));
|
||||
});
|
||||
|
||||
forwarded.displayName = displayName;
|
||||
forwarded.WrappedComponent = WrappedComponent;
|
||||
return (0, _hoistNonReactStatics["default"])(forwarded, WrappedComponent);
|
||||
}
|
||||
|
||||
return (0, _hoistNonReactStatics["default"])(Connect, WrappedComponent);
|
||||
};
|
||||
}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.createConnect = createConnect;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
||||
|
||||
var _connectAdvanced = _interopRequireDefault(require("../components/connectAdvanced"));
|
||||
|
||||
var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
|
||||
|
||||
var _mapDispatchToProps = _interopRequireDefault(require("./mapDispatchToProps"));
|
||||
|
||||
var _mapStateToProps = _interopRequireDefault(require("./mapStateToProps"));
|
||||
|
||||
var _mergeProps = _interopRequireDefault(require("./mergeProps"));
|
||||
|
||||
var _selectorFactory = _interopRequireDefault(require("./selectorFactory"));
|
||||
|
||||
/*
|
||||
connect is a facade over connectAdvanced. It turns its args into a compatible
|
||||
selectorFactory, which has the signature:
|
||||
|
||||
(dispatch, options) => (nextState, nextOwnProps) => nextFinalProps
|
||||
|
||||
connect passes its args to connectAdvanced as options, which will in turn pass them to
|
||||
selectorFactory each time a Connect component instance is instantiated or hot reloaded.
|
||||
|
||||
selectorFactory returns a final props selector from its mapStateToProps,
|
||||
mapStateToPropsFactories, mapDispatchToProps, mapDispatchToPropsFactories, mergeProps,
|
||||
mergePropsFactories, and pure args.
|
||||
|
||||
The resulting final props selector is called by the Connect component instance whenever
|
||||
it receives new props or store state.
|
||||
*/
|
||||
function match(arg, factories, name) {
|
||||
for (var i = factories.length - 1; i >= 0; i--) {
|
||||
var result = factories[i](arg);
|
||||
if (result) return result;
|
||||
}
|
||||
|
||||
return function (dispatch, options) {
|
||||
throw new Error("Invalid value of type " + typeof arg + " for " + name + " argument when connecting component " + options.wrappedComponentName + ".");
|
||||
};
|
||||
}
|
||||
|
||||
function strictEqual(a, b) {
|
||||
return a === b;
|
||||
} // createConnect with default args builds the 'official' connect behavior. Calling it with
|
||||
// different options opens up some testing and extensibility scenarios
|
||||
|
||||
|
||||
function createConnect(_temp) {
|
||||
var _ref = _temp === void 0 ? {} : _temp,
|
||||
_ref$connectHOC = _ref.connectHOC,
|
||||
connectHOC = _ref$connectHOC === void 0 ? _connectAdvanced["default"] : _ref$connectHOC,
|
||||
_ref$mapStateToPropsF = _ref.mapStateToPropsFactories,
|
||||
mapStateToPropsFactories = _ref$mapStateToPropsF === void 0 ? _mapStateToProps["default"] : _ref$mapStateToPropsF,
|
||||
_ref$mapDispatchToPro = _ref.mapDispatchToPropsFactories,
|
||||
mapDispatchToPropsFactories = _ref$mapDispatchToPro === void 0 ? _mapDispatchToProps["default"] : _ref$mapDispatchToPro,
|
||||
_ref$mergePropsFactor = _ref.mergePropsFactories,
|
||||
mergePropsFactories = _ref$mergePropsFactor === void 0 ? _mergeProps["default"] : _ref$mergePropsFactor,
|
||||
_ref$selectorFactory = _ref.selectorFactory,
|
||||
selectorFactory = _ref$selectorFactory === void 0 ? _selectorFactory["default"] : _ref$selectorFactory;
|
||||
|
||||
return function connect(mapStateToProps, mapDispatchToProps, mergeProps, _ref2) {
|
||||
if (_ref2 === void 0) {
|
||||
_ref2 = {};
|
||||
}
|
||||
|
||||
var _ref3 = _ref2,
|
||||
_ref3$pure = _ref3.pure,
|
||||
pure = _ref3$pure === void 0 ? true : _ref3$pure,
|
||||
_ref3$areStatesEqual = _ref3.areStatesEqual,
|
||||
areStatesEqual = _ref3$areStatesEqual === void 0 ? strictEqual : _ref3$areStatesEqual,
|
||||
_ref3$areOwnPropsEqua = _ref3.areOwnPropsEqual,
|
||||
areOwnPropsEqual = _ref3$areOwnPropsEqua === void 0 ? _shallowEqual["default"] : _ref3$areOwnPropsEqua,
|
||||
_ref3$areStatePropsEq = _ref3.areStatePropsEqual,
|
||||
areStatePropsEqual = _ref3$areStatePropsEq === void 0 ? _shallowEqual["default"] : _ref3$areStatePropsEq,
|
||||
_ref3$areMergedPropsE = _ref3.areMergedPropsEqual,
|
||||
areMergedPropsEqual = _ref3$areMergedPropsE === void 0 ? _shallowEqual["default"] : _ref3$areMergedPropsE,
|
||||
extraOptions = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, ["pure", "areStatesEqual", "areOwnPropsEqual", "areStatePropsEqual", "areMergedPropsEqual"]);
|
||||
var initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
|
||||
var initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
|
||||
var initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps');
|
||||
return connectHOC(selectorFactory, (0, _extends2["default"])({
|
||||
// used in error messages
|
||||
methodName: 'connect',
|
||||
// used to compute Connect's displayName from the wrapped component's displayName.
|
||||
getDisplayName: function getDisplayName(name) {
|
||||
return "Connect(" + name + ")";
|
||||
},
|
||||
// if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
|
||||
shouldHandleStateChanges: Boolean(mapStateToProps),
|
||||
// passed through to selectorFactory
|
||||
initMapStateToProps: initMapStateToProps,
|
||||
initMapDispatchToProps: initMapDispatchToProps,
|
||||
initMergeProps: initMergeProps,
|
||||
pure: pure,
|
||||
areStatesEqual: areStatesEqual,
|
||||
areOwnPropsEqual: areOwnPropsEqual,
|
||||
areStatePropsEqual: areStatePropsEqual,
|
||||
areMergedPropsEqual: areMergedPropsEqual
|
||||
}, extraOptions));
|
||||
};
|
||||
}
|
||||
|
||||
var _default =
|
||||
/*#__PURE__*/
|
||||
createConnect();
|
||||
|
||||
exports["default"] = _default;
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.whenMapDispatchToPropsIsFunction = whenMapDispatchToPropsIsFunction;
|
||||
exports.whenMapDispatchToPropsIsMissing = whenMapDispatchToPropsIsMissing;
|
||||
exports.whenMapDispatchToPropsIsObject = whenMapDispatchToPropsIsObject;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _redux = require("redux");
|
||||
|
||||
var _wrapMapToProps = require("./wrapMapToProps");
|
||||
|
||||
function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
|
||||
return typeof mapDispatchToProps === 'function' ? (0, _wrapMapToProps.wrapMapToPropsFunc)(mapDispatchToProps, 'mapDispatchToProps') : undefined;
|
||||
}
|
||||
|
||||
function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
|
||||
return !mapDispatchToProps ? (0, _wrapMapToProps.wrapMapToPropsConstant)(function (dispatch) {
|
||||
return {
|
||||
dispatch: dispatch
|
||||
};
|
||||
}) : undefined;
|
||||
}
|
||||
|
||||
function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
|
||||
return mapDispatchToProps && typeof mapDispatchToProps === 'object' ? (0, _wrapMapToProps.wrapMapToPropsConstant)(function (dispatch) {
|
||||
return (0, _redux.bindActionCreators)(mapDispatchToProps, dispatch);
|
||||
}) : undefined;
|
||||
}
|
||||
|
||||
var _default = [whenMapDispatchToPropsIsFunction, whenMapDispatchToPropsIsMissing, whenMapDispatchToPropsIsObject];
|
||||
exports["default"] = _default;
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.whenMapStateToPropsIsFunction = whenMapStateToPropsIsFunction;
|
||||
exports.whenMapStateToPropsIsMissing = whenMapStateToPropsIsMissing;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _wrapMapToProps = require("./wrapMapToProps");
|
||||
|
||||
function whenMapStateToPropsIsFunction(mapStateToProps) {
|
||||
return typeof mapStateToProps === 'function' ? (0, _wrapMapToProps.wrapMapToPropsFunc)(mapStateToProps, 'mapStateToProps') : undefined;
|
||||
}
|
||||
|
||||
function whenMapStateToPropsIsMissing(mapStateToProps) {
|
||||
return !mapStateToProps ? (0, _wrapMapToProps.wrapMapToPropsConstant)(function () {
|
||||
return {};
|
||||
}) : undefined;
|
||||
}
|
||||
|
||||
var _default = [whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing];
|
||||
exports["default"] = _default;
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.defaultMergeProps = defaultMergeProps;
|
||||
exports.wrapMergePropsFunc = wrapMergePropsFunc;
|
||||
exports.whenMergePropsIsFunction = whenMergePropsIsFunction;
|
||||
exports.whenMergePropsIsOmitted = whenMergePropsIsOmitted;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _verifyPlainObject = _interopRequireDefault(require("../utils/verifyPlainObject"));
|
||||
|
||||
function defaultMergeProps(stateProps, dispatchProps, ownProps) {
|
||||
return (0, _extends2["default"])({}, ownProps, {}, stateProps, {}, dispatchProps);
|
||||
}
|
||||
|
||||
function wrapMergePropsFunc(mergeProps) {
|
||||
return function initMergePropsProxy(dispatch, _ref) {
|
||||
var displayName = _ref.displayName,
|
||||
pure = _ref.pure,
|
||||
areMergedPropsEqual = _ref.areMergedPropsEqual;
|
||||
var hasRunOnce = false;
|
||||
var mergedProps;
|
||||
return function mergePropsProxy(stateProps, dispatchProps, ownProps) {
|
||||
var nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
|
||||
if (hasRunOnce) {
|
||||
if (!pure || !areMergedPropsEqual(nextMergedProps, mergedProps)) mergedProps = nextMergedProps;
|
||||
} else {
|
||||
hasRunOnce = true;
|
||||
mergedProps = nextMergedProps;
|
||||
if (process.env.NODE_ENV !== 'production') (0, _verifyPlainObject["default"])(mergedProps, displayName, 'mergeProps');
|
||||
}
|
||||
|
||||
return mergedProps;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function whenMergePropsIsFunction(mergeProps) {
|
||||
return typeof mergeProps === 'function' ? wrapMergePropsFunc(mergeProps) : undefined;
|
||||
}
|
||||
|
||||
function whenMergePropsIsOmitted(mergeProps) {
|
||||
return !mergeProps ? function () {
|
||||
return defaultMergeProps;
|
||||
} : undefined;
|
||||
}
|
||||
|
||||
var _default = [whenMergePropsIsFunction, whenMergePropsIsOmitted];
|
||||
exports["default"] = _default;
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.impureFinalPropsSelectorFactory = impureFinalPropsSelectorFactory;
|
||||
exports.pureFinalPropsSelectorFactory = pureFinalPropsSelectorFactory;
|
||||
exports["default"] = finalPropsSelectorFactory;
|
||||
|
||||
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
||||
|
||||
var _verifySubselectors = _interopRequireDefault(require("./verifySubselectors"));
|
||||
|
||||
function impureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch) {
|
||||
return function impureFinalPropsSelector(state, ownProps) {
|
||||
return mergeProps(mapStateToProps(state, ownProps), mapDispatchToProps(dispatch, ownProps), ownProps);
|
||||
};
|
||||
}
|
||||
|
||||
function pureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, _ref) {
|
||||
var areStatesEqual = _ref.areStatesEqual,
|
||||
areOwnPropsEqual = _ref.areOwnPropsEqual,
|
||||
areStatePropsEqual = _ref.areStatePropsEqual;
|
||||
var hasRunAtLeastOnce = false;
|
||||
var state;
|
||||
var ownProps;
|
||||
var stateProps;
|
||||
var dispatchProps;
|
||||
var mergedProps;
|
||||
|
||||
function handleFirstCall(firstState, firstOwnProps) {
|
||||
state = firstState;
|
||||
ownProps = firstOwnProps;
|
||||
stateProps = mapStateToProps(state, ownProps);
|
||||
dispatchProps = mapDispatchToProps(dispatch, ownProps);
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
hasRunAtLeastOnce = true;
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleNewPropsAndNewState() {
|
||||
stateProps = mapStateToProps(state, ownProps);
|
||||
if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleNewProps() {
|
||||
if (mapStateToProps.dependsOnOwnProps) stateProps = mapStateToProps(state, ownProps);
|
||||
if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleNewState() {
|
||||
var nextStateProps = mapStateToProps(state, ownProps);
|
||||
var statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps);
|
||||
stateProps = nextStateProps;
|
||||
if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
function handleSubsequentCalls(nextState, nextOwnProps) {
|
||||
var propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps);
|
||||
var stateChanged = !areStatesEqual(nextState, state);
|
||||
state = nextState;
|
||||
ownProps = nextOwnProps;
|
||||
if (propsChanged && stateChanged) return handleNewPropsAndNewState();
|
||||
if (propsChanged) return handleNewProps();
|
||||
if (stateChanged) return handleNewState();
|
||||
return mergedProps;
|
||||
}
|
||||
|
||||
return function pureFinalPropsSelector(nextState, nextOwnProps) {
|
||||
return hasRunAtLeastOnce ? handleSubsequentCalls(nextState, nextOwnProps) : handleFirstCall(nextState, nextOwnProps);
|
||||
};
|
||||
} // TODO: Add more comments
|
||||
// If pure is true, the selector returned by selectorFactory will memoize its results,
|
||||
// allowing connectAdvanced's shouldComponentUpdate to return false if final
|
||||
// props have not changed. If false, the selector will always return a new
|
||||
// object and shouldComponentUpdate will always return true.
|
||||
|
||||
|
||||
function finalPropsSelectorFactory(dispatch, _ref2) {
|
||||
var initMapStateToProps = _ref2.initMapStateToProps,
|
||||
initMapDispatchToProps = _ref2.initMapDispatchToProps,
|
||||
initMergeProps = _ref2.initMergeProps,
|
||||
options = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["initMapStateToProps", "initMapDispatchToProps", "initMergeProps"]);
|
||||
var mapStateToProps = initMapStateToProps(dispatch, options);
|
||||
var mapDispatchToProps = initMapDispatchToProps(dispatch, options);
|
||||
var mergeProps = initMergeProps(dispatch, options);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
(0, _verifySubselectors["default"])(mapStateToProps, mapDispatchToProps, mergeProps, options.displayName);
|
||||
}
|
||||
|
||||
var selectorFactory = options.pure ? pureFinalPropsSelectorFactory : impureFinalPropsSelectorFactory;
|
||||
return selectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, options);
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = verifySubselectors;
|
||||
|
||||
var _warning = _interopRequireDefault(require("../utils/warning"));
|
||||
|
||||
function verify(selector, methodName, displayName) {
|
||||
if (!selector) {
|
||||
throw new Error("Unexpected value for " + methodName + " in " + displayName + ".");
|
||||
} else if (methodName === 'mapStateToProps' || methodName === 'mapDispatchToProps') {
|
||||
if (!Object.prototype.hasOwnProperty.call(selector, 'dependsOnOwnProps')) {
|
||||
(0, _warning["default"])("The selector for " + methodName + " of " + displayName + " did not specify a value for dependsOnOwnProps.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, displayName) {
|
||||
verify(mapStateToProps, 'mapStateToProps', displayName);
|
||||
verify(mapDispatchToProps, 'mapDispatchToProps', displayName);
|
||||
verify(mergeProps, 'mergeProps', displayName);
|
||||
}
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.wrapMapToPropsConstant = wrapMapToPropsConstant;
|
||||
exports.getDependsOnOwnProps = getDependsOnOwnProps;
|
||||
exports.wrapMapToPropsFunc = wrapMapToPropsFunc;
|
||||
|
||||
var _verifyPlainObject = _interopRequireDefault(require("../utils/verifyPlainObject"));
|
||||
|
||||
function wrapMapToPropsConstant(getConstant) {
|
||||
return function initConstantSelector(dispatch, options) {
|
||||
var constant = getConstant(dispatch, options);
|
||||
|
||||
function constantSelector() {
|
||||
return constant;
|
||||
}
|
||||
|
||||
constantSelector.dependsOnOwnProps = false;
|
||||
return constantSelector;
|
||||
};
|
||||
} // dependsOnOwnProps is used by createMapToPropsProxy to determine whether to pass props as args
|
||||
// to the mapToProps function being wrapped. It is also used by makePurePropsSelector to determine
|
||||
// whether mapToProps needs to be invoked when props have changed.
|
||||
//
|
||||
// A length of one signals that mapToProps does not depend on props from the parent component.
|
||||
// A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
|
||||
// therefore not reporting its length accurately..
|
||||
|
||||
|
||||
function getDependsOnOwnProps(mapToProps) {
|
||||
return mapToProps.dependsOnOwnProps !== null && mapToProps.dependsOnOwnProps !== undefined ? Boolean(mapToProps.dependsOnOwnProps) : mapToProps.length !== 1;
|
||||
} // Used by whenMapStateToPropsIsFunction and whenMapDispatchToPropsIsFunction,
|
||||
// this function wraps mapToProps in a proxy function which does several things:
|
||||
//
|
||||
// * Detects whether the mapToProps function being called depends on props, which
|
||||
// is used by selectorFactory to decide if it should reinvoke on props changes.
|
||||
//
|
||||
// * On first call, handles mapToProps if returns another function, and treats that
|
||||
// new function as the true mapToProps for subsequent calls.
|
||||
//
|
||||
// * On first call, verifies the first result is a plain object, in order to warn
|
||||
// the developer that their mapToProps function is not returning a valid result.
|
||||
//
|
||||
|
||||
|
||||
function wrapMapToPropsFunc(mapToProps, methodName) {
|
||||
return function initProxySelector(dispatch, _ref) {
|
||||
var displayName = _ref.displayName;
|
||||
|
||||
var proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
|
||||
return proxy.dependsOnOwnProps ? proxy.mapToProps(stateOrDispatch, ownProps) : proxy.mapToProps(stateOrDispatch);
|
||||
}; // allow detectFactoryAndVerify to get ownProps
|
||||
|
||||
|
||||
proxy.dependsOnOwnProps = true;
|
||||
|
||||
proxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch, ownProps) {
|
||||
proxy.mapToProps = mapToProps;
|
||||
proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps);
|
||||
var props = proxy(stateOrDispatch, ownProps);
|
||||
|
||||
if (typeof props === 'function') {
|
||||
proxy.mapToProps = props;
|
||||
proxy.dependsOnOwnProps = getDependsOnOwnProps(props);
|
||||
props = proxy(stateOrDispatch, ownProps);
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') (0, _verifyPlainObject["default"])(props, displayName, methodName);
|
||||
return props;
|
||||
};
|
||||
|
||||
return proxy;
|
||||
};
|
||||
}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.createDispatchHook = createDispatchHook;
|
||||
exports.useDispatch = void 0;
|
||||
|
||||
var _Context = require("../components/Context");
|
||||
|
||||
var _useStore = require("./useStore");
|
||||
|
||||
/**
|
||||
* Hook factory, which creates a `useDispatch` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useDispatch` hook bound to the specified context.
|
||||
*/
|
||||
function createDispatchHook(context) {
|
||||
if (context === void 0) {
|
||||
context = _Context.ReactReduxContext;
|
||||
}
|
||||
|
||||
var useStore = context === _Context.ReactReduxContext ? _useStore.useStore : (0, _useStore.createStoreHook)(context);
|
||||
return function useDispatch() {
|
||||
var store = useStore();
|
||||
return store.dispatch;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* A hook to access the redux `dispatch` function.
|
||||
*
|
||||
* @returns {any|function} redux store's `dispatch` function
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React, { useCallback } from 'react'
|
||||
* import { useDispatch } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = ({ value }) => {
|
||||
* const dispatch = useDispatch()
|
||||
* const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
|
||||
* return (
|
||||
* <div>
|
||||
* <span>{value}</span>
|
||||
* <button onClick={increaseCounter}>Increase counter</button>
|
||||
* </div>
|
||||
* )
|
||||
* }
|
||||
*/
|
||||
|
||||
|
||||
var useDispatch =
|
||||
/*#__PURE__*/
|
||||
createDispatchHook();
|
||||
exports.useDispatch = useDispatch;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.useReduxContext = useReduxContext;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _Context = require("../components/Context");
|
||||
|
||||
/**
|
||||
* A hook to access the value of the `ReactReduxContext`. This is a low-level
|
||||
* hook that you should usually not need to call directly.
|
||||
*
|
||||
* @returns {any} the value of the `ReactReduxContext`
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useReduxContext } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = ({ value }) => {
|
||||
* const { store } = useReduxContext()
|
||||
* return <div>{store.getState()}</div>
|
||||
* }
|
||||
*/
|
||||
function useReduxContext() {
|
||||
var contextValue = (0, _react.useContext)(_Context.ReactReduxContext);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !contextValue) {
|
||||
throw new Error('could not find react-redux context value; please ensure the component is wrapped in a <Provider>');
|
||||
}
|
||||
|
||||
return contextValue;
|
||||
}
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.createSelectorHook = createSelectorHook;
|
||||
exports.useSelector = void 0;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _useReduxContext2 = require("./useReduxContext");
|
||||
|
||||
var _Subscription = _interopRequireDefault(require("../utils/Subscription"));
|
||||
|
||||
var _useIsomorphicLayoutEffect = require("../utils/useIsomorphicLayoutEffect");
|
||||
|
||||
var _Context = require("../components/Context");
|
||||
|
||||
var refEquality = function refEquality(a, b) {
|
||||
return a === b;
|
||||
};
|
||||
|
||||
function useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {
|
||||
var _useReducer = (0, _react.useReducer)(function (s) {
|
||||
return s + 1;
|
||||
}, 0),
|
||||
forceRender = _useReducer[1];
|
||||
|
||||
var subscription = (0, _react.useMemo)(function () {
|
||||
return new _Subscription["default"](store, contextSub);
|
||||
}, [store, contextSub]);
|
||||
var latestSubscriptionCallbackError = (0, _react.useRef)();
|
||||
var latestSelector = (0, _react.useRef)();
|
||||
var latestSelectedState = (0, _react.useRef)();
|
||||
var selectedState;
|
||||
|
||||
try {
|
||||
if (selector !== latestSelector.current || latestSubscriptionCallbackError.current) {
|
||||
selectedState = selector(store.getState());
|
||||
} else {
|
||||
selectedState = latestSelectedState.current;
|
||||
}
|
||||
} catch (err) {
|
||||
if (latestSubscriptionCallbackError.current) {
|
||||
err.message += "\nThe error may be correlated with this previous error:\n" + latestSubscriptionCallbackError.current.stack + "\n\n";
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
|
||||
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
||||
latestSelector.current = selector;
|
||||
latestSelectedState.current = selectedState;
|
||||
latestSubscriptionCallbackError.current = undefined;
|
||||
});
|
||||
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
||||
function checkForUpdates() {
|
||||
try {
|
||||
var newSelectedState = latestSelector.current(store.getState());
|
||||
|
||||
if (equalityFn(newSelectedState, latestSelectedState.current)) {
|
||||
return;
|
||||
}
|
||||
|
||||
latestSelectedState.current = newSelectedState;
|
||||
} catch (err) {
|
||||
// we ignore all errors here, since when the component
|
||||
// is re-rendered, the selectors are called again, and
|
||||
// will throw again, if neither props nor store state
|
||||
// changed
|
||||
latestSubscriptionCallbackError.current = err;
|
||||
}
|
||||
|
||||
forceRender({});
|
||||
}
|
||||
|
||||
subscription.onStateChange = checkForUpdates;
|
||||
subscription.trySubscribe();
|
||||
checkForUpdates();
|
||||
return function () {
|
||||
return subscription.tryUnsubscribe();
|
||||
};
|
||||
}, [store, subscription]);
|
||||
return selectedState;
|
||||
}
|
||||
/**
|
||||
* Hook factory, which creates a `useSelector` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useSelector` hook bound to the specified context.
|
||||
*/
|
||||
|
||||
|
||||
function createSelectorHook(context) {
|
||||
if (context === void 0) {
|
||||
context = _Context.ReactReduxContext;
|
||||
}
|
||||
|
||||
var useReduxContext = context === _Context.ReactReduxContext ? _useReduxContext2.useReduxContext : function () {
|
||||
return (0, _react.useContext)(context);
|
||||
};
|
||||
return function useSelector(selector, equalityFn) {
|
||||
if (equalityFn === void 0) {
|
||||
equalityFn = refEquality;
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !selector) {
|
||||
throw new Error("You must pass a selector to useSelectors");
|
||||
}
|
||||
|
||||
var _useReduxContext = useReduxContext(),
|
||||
store = _useReduxContext.store,
|
||||
contextSub = _useReduxContext.subscription;
|
||||
|
||||
return useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* A hook to access the redux store's state. This hook takes a selector function
|
||||
* as an argument. The selector is called with the store state.
|
||||
*
|
||||
* This hook takes an optional equality comparison function as the second parameter
|
||||
* that allows you to customize the way the selected state is compared to determine
|
||||
* whether the component needs to be re-rendered.
|
||||
*
|
||||
* @param {Function} selector the selector function
|
||||
* @param {Function=} equalityFn the function that will be used to determine equality
|
||||
*
|
||||
* @returns {any} the selected state
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useSelector } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = () => {
|
||||
* const counter = useSelector(state => state.counter)
|
||||
* return <div>{counter}</div>
|
||||
* }
|
||||
*/
|
||||
|
||||
|
||||
var useSelector =
|
||||
/*#__PURE__*/
|
||||
createSelectorHook();
|
||||
exports.useSelector = useSelector;
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.createStoreHook = createStoreHook;
|
||||
exports.useStore = void 0;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _Context = require("../components/Context");
|
||||
|
||||
var _useReduxContext2 = require("./useReduxContext");
|
||||
|
||||
/**
|
||||
* Hook factory, which creates a `useStore` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useStore` hook bound to the specified context.
|
||||
*/
|
||||
function createStoreHook(context) {
|
||||
if (context === void 0) {
|
||||
context = _Context.ReactReduxContext;
|
||||
}
|
||||
|
||||
var useReduxContext = context === _Context.ReactReduxContext ? _useReduxContext2.useReduxContext : function () {
|
||||
return (0, _react.useContext)(context);
|
||||
};
|
||||
return function useStore() {
|
||||
var _useReduxContext = useReduxContext(),
|
||||
store = _useReduxContext.store;
|
||||
|
||||
return store;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* A hook to access the redux store.
|
||||
*
|
||||
* @returns {any} the redux store
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useStore } from 'react-redux'
|
||||
*
|
||||
* export const ExampleComponent = () => {
|
||||
* const store = useStore()
|
||||
* return <div>{store.getState()}</div>
|
||||
* }
|
||||
*/
|
||||
|
||||
|
||||
var useStore =
|
||||
/*#__PURE__*/
|
||||
createStoreHook();
|
||||
exports.useStore = useStore;
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _Provider = _interopRequireDefault(require("./components/Provider"));
|
||||
|
||||
exports.Provider = _Provider["default"];
|
||||
|
||||
var _connectAdvanced = _interopRequireDefault(require("./components/connectAdvanced"));
|
||||
|
||||
exports.connectAdvanced = _connectAdvanced["default"];
|
||||
|
||||
var _Context = require("./components/Context");
|
||||
|
||||
exports.ReactReduxContext = _Context.ReactReduxContext;
|
||||
|
||||
var _connect = _interopRequireDefault(require("./connect/connect"));
|
||||
|
||||
exports.connect = _connect["default"];
|
||||
|
||||
var _useDispatch = require("./hooks/useDispatch");
|
||||
|
||||
exports.useDispatch = _useDispatch.useDispatch;
|
||||
exports.createDispatchHook = _useDispatch.createDispatchHook;
|
||||
|
||||
var _useSelector = require("./hooks/useSelector");
|
||||
|
||||
exports.useSelector = _useSelector.useSelector;
|
||||
exports.createSelectorHook = _useSelector.createSelectorHook;
|
||||
|
||||
var _useStore = require("./hooks/useStore");
|
||||
|
||||
exports.useStore = _useStore.useStore;
|
||||
exports.createStoreHook = _useStore.createStoreHook;
|
||||
|
||||
var _batch = require("./utils/batch");
|
||||
|
||||
var _reactBatchedUpdates = require("./utils/reactBatchedUpdates");
|
||||
|
||||
exports.batch = _reactBatchedUpdates.unstable_batchedUpdates;
|
||||
|
||||
var _shallowEqual = _interopRequireDefault(require("./utils/shallowEqual"));
|
||||
|
||||
exports.shallowEqual = _shallowEqual["default"];
|
||||
(0, _batch.setBatch)(_reactBatchedUpdates.unstable_batchedUpdates);
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = void 0;
|
||||
|
||||
var _batch = require("./batch");
|
||||
|
||||
// encapsulates the subscription logic for connecting a component to the redux store, as
|
||||
// well as nesting subscriptions of descendant components, so that we can ensure the
|
||||
// ancestor components re-render before descendants
|
||||
var nullListeners = {
|
||||
notify: function notify() {}
|
||||
};
|
||||
|
||||
function createListenerCollection() {
|
||||
var batch = (0, _batch.getBatch)();
|
||||
var first = null;
|
||||
var last = null;
|
||||
return {
|
||||
clear: function clear() {
|
||||
first = null;
|
||||
last = null;
|
||||
},
|
||||
notify: function notify() {
|
||||
batch(function () {
|
||||
var listener = first;
|
||||
|
||||
while (listener) {
|
||||
listener.callback();
|
||||
listener = listener.next;
|
||||
}
|
||||
});
|
||||
},
|
||||
get: function get() {
|
||||
var listeners = [];
|
||||
var listener = first;
|
||||
|
||||
while (listener) {
|
||||
listeners.push(listener);
|
||||
listener = listener.next;
|
||||
}
|
||||
|
||||
return listeners;
|
||||
},
|
||||
subscribe: function subscribe(callback) {
|
||||
var isSubscribed = true;
|
||||
var listener = last = {
|
||||
callback: callback,
|
||||
next: null,
|
||||
prev: last
|
||||
};
|
||||
|
||||
if (listener.prev) {
|
||||
listener.prev.next = listener;
|
||||
} else {
|
||||
first = listener;
|
||||
}
|
||||
|
||||
return function unsubscribe() {
|
||||
if (!isSubscribed || first === null) return;
|
||||
isSubscribed = false;
|
||||
|
||||
if (listener.next) {
|
||||
listener.next.prev = listener.prev;
|
||||
} else {
|
||||
last = listener.prev;
|
||||
}
|
||||
|
||||
if (listener.prev) {
|
||||
listener.prev.next = listener.next;
|
||||
} else {
|
||||
first = listener.next;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var Subscription =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Subscription(store, parentSub) {
|
||||
this.store = store;
|
||||
this.parentSub = parentSub;
|
||||
this.unsubscribe = null;
|
||||
this.listeners = nullListeners;
|
||||
this.handleChangeWrapper = this.handleChangeWrapper.bind(this);
|
||||
}
|
||||
|
||||
var _proto = Subscription.prototype;
|
||||
|
||||
_proto.addNestedSub = function addNestedSub(listener) {
|
||||
this.trySubscribe();
|
||||
return this.listeners.subscribe(listener);
|
||||
};
|
||||
|
||||
_proto.notifyNestedSubs = function notifyNestedSubs() {
|
||||
this.listeners.notify();
|
||||
};
|
||||
|
||||
_proto.handleChangeWrapper = function handleChangeWrapper() {
|
||||
if (this.onStateChange) {
|
||||
this.onStateChange();
|
||||
}
|
||||
};
|
||||
|
||||
_proto.isSubscribed = function isSubscribed() {
|
||||
return Boolean(this.unsubscribe);
|
||||
};
|
||||
|
||||
_proto.trySubscribe = function trySubscribe() {
|
||||
if (!this.unsubscribe) {
|
||||
this.unsubscribe = this.parentSub ? this.parentSub.addNestedSub(this.handleChangeWrapper) : this.store.subscribe(this.handleChangeWrapper);
|
||||
this.listeners = createListenerCollection();
|
||||
}
|
||||
};
|
||||
|
||||
_proto.tryUnsubscribe = function tryUnsubscribe() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
this.unsubscribe = null;
|
||||
this.listeners.clear();
|
||||
this.listeners = nullListeners;
|
||||
}
|
||||
};
|
||||
|
||||
return Subscription;
|
||||
}();
|
||||
|
||||
exports["default"] = Subscription;
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.getBatch = exports.setBatch = void 0;
|
||||
|
||||
// Default to a dummy "batch" implementation that just runs the callback
|
||||
function defaultNoopBatch(callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
var batch = defaultNoopBatch; // Allow injecting another batching function later
|
||||
|
||||
var setBatch = function setBatch(newBatch) {
|
||||
return batch = newBatch;
|
||||
}; // Supply a getter just to skip dealing with ESM bindings
|
||||
|
||||
|
||||
exports.setBatch = setBatch;
|
||||
|
||||
var getBatch = function getBatch() {
|
||||
return batch;
|
||||
};
|
||||
|
||||
exports.getBatch = getBatch;
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = isPlainObject;
|
||||
|
||||
/**
|
||||
* @param {any} obj The object to inspect.
|
||||
* @returns {boolean} True if the argument appears to be a plain object.
|
||||
*/
|
||||
function isPlainObject(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) return false;
|
||||
var proto = Object.getPrototypeOf(obj);
|
||||
if (proto === null) return true;
|
||||
var baseProto = proto;
|
||||
|
||||
while (Object.getPrototypeOf(baseProto) !== null) {
|
||||
baseProto = Object.getPrototypeOf(baseProto);
|
||||
}
|
||||
|
||||
return proto === baseProto;
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.unstable_batchedUpdates = void 0;
|
||||
|
||||
var _reactDom = require("react-dom");
|
||||
|
||||
exports.unstable_batchedUpdates = _reactDom.unstable_batchedUpdates;
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _reactNative = require("react-native");
|
||||
|
||||
exports.unstable_batchedUpdates = _reactNative.unstable_batchedUpdates;
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = shallowEqual;
|
||||
|
||||
function is(x, y) {
|
||||
if (x === y) {
|
||||
return x !== 0 || y !== 0 || 1 / x === 1 / y;
|
||||
} else {
|
||||
return x !== x && y !== y;
|
||||
}
|
||||
}
|
||||
|
||||
function shallowEqual(objA, objB) {
|
||||
if (is(objA, objB)) return true;
|
||||
|
||||
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var keysA = Object.keys(objA);
|
||||
var keysB = Object.keys(objB);
|
||||
if (keysA.length !== keysB.length) return false;
|
||||
|
||||
for (var i = 0; i < keysA.length; i++) {
|
||||
if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.useIsomorphicLayoutEffect = void 0;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
// React currently throws a warning when using useLayoutEffect on the server.
|
||||
// To get around it, we can conditionally useEffect on the server (no-op) and
|
||||
// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
|
||||
// subscription callback always has the selector from the latest render commit
|
||||
// available, otherwise a store update may happen between render and the effect,
|
||||
// which may cause missed updates; we also must ensure the store subscription
|
||||
// is created synchronously, otherwise a store update may occur before the
|
||||
// subscription is created and an inconsistent state may be observed
|
||||
var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
|
||||
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.useIsomorphicLayoutEffect = void 0;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
// Under React Native, we know that we always want to use useLayoutEffect
|
||||
var useIsomorphicLayoutEffect = _react.useLayoutEffect;
|
||||
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = verifyPlainObject;
|
||||
|
||||
var _isPlainObject = _interopRequireDefault(require("./isPlainObject"));
|
||||
|
||||
var _warning = _interopRequireDefault(require("./warning"));
|
||||
|
||||
function verifyPlainObject(value, displayName, methodName) {
|
||||
if (!(0, _isPlainObject["default"])(value)) {
|
||||
(0, _warning["default"])(methodName + "() in " + displayName + " must return a plain object. Instead received " + value + ".");
|
||||
}
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = warning;
|
||||
|
||||
/**
|
||||
* Prints a warning in the console if it exists.
|
||||
*
|
||||
* @param {String} message The warning message.
|
||||
* @returns {void}
|
||||
*/
|
||||
function warning(message) {
|
||||
/* eslint-disable no-console */
|
||||
if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
||||
console.error(message);
|
||||
}
|
||||
/* eslint-enable no-console */
|
||||
|
||||
|
||||
try {
|
||||
// This error was thrown as a convenience so that if you enable
|
||||
// "break on all exceptions" in your console,
|
||||
// it would pause the execution at this line.
|
||||
throw new Error(message);
|
||||
/* eslint-disable no-empty */
|
||||
} catch (e) {}
|
||||
/* eslint-enable no-empty */
|
||||
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = wrapActionCreators;
|
||||
|
||||
var _redux = require("redux");
|
||||
|
||||
function wrapActionCreators(actionCreators) {
|
||||
return function (dispatch) {
|
||||
return (0, _redux.bindActionCreators)(actionCreators, dispatch);
|
||||
};
|
||||
}
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
{
|
||||
"_from": "react-redux",
|
||||
"_id": "react-redux@7.2.0",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
|
||||
"_location": "/react-redux",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "tag",
|
||||
"registry": true,
|
||||
"raw": "react-redux",
|
||||
"name": "react-redux",
|
||||
"escapedName": "react-redux",
|
||||
"rawSpec": "",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "latest"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
|
||||
"_shasum": "f970f62192b3981642fec46fd0db18a074fe879d",
|
||||
"_spec": "react-redux",
|
||||
"_where": "/Users/dhthomp/go/src/github.com/davidlick/bookish",
|
||||
"author": {
|
||||
"name": "Dan Abramov",
|
||||
"email": "dan.abramov@me.com",
|
||||
"url": "https://github.com/gaearon"
|
||||
},
|
||||
"browserify": {
|
||||
"transform": [
|
||||
"loose-envify"
|
||||
]
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/reduxjs/react-redux/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.9.0"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "Official React bindings for Redux",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.5.5",
|
||||
"@babel/core": "^7.5.5",
|
||||
"@babel/plugin-proposal-decorators": "^7.4.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
|
||||
"@babel/plugin-transform-react-display-name": "^7.2.0",
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@babel/plugin-transform-runtime": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.5",
|
||||
"@testing-library/jest-dom": "^4.1.0",
|
||||
"@testing-library/jest-native": "^3.0.2",
|
||||
"@testing-library/react": "^8.0.8",
|
||||
"@testing-library/react-hooks": "^1.1.0",
|
||||
"@testing-library/react-native": "^4.2.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-jest": "^24.9.0",
|
||||
"codecov": "^3.5.0",
|
||||
"create-react-class": "^15.6.3",
|
||||
"cross-env": "^5.2.0",
|
||||
"es3ify": "^0.2.0",
|
||||
"eslint": "^6.2.2",
|
||||
"eslint-config-prettier": "^6.1.0",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"eslint-plugin-react": "^7.14.3",
|
||||
"glob": "^7.1.4",
|
||||
"jest": "^24.9.0",
|
||||
"prettier": "^1.18.2",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-native": "^0.61.4",
|
||||
"react-test-renderer": "^16.8.6",
|
||||
"redux": "^4.0.4",
|
||||
"rimraf": "^3.0.0",
|
||||
"rollup": "^1.20.2",
|
||||
"rollup-plugin-babel": "^4.3.3",
|
||||
"rollup-plugin-commonjs": "^10.0.2",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"rollup-plugin-terser": "^5.1.1"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"lib",
|
||||
"src",
|
||||
"es"
|
||||
],
|
||||
"homepage": "https://github.com/reduxjs/react-redux",
|
||||
"keywords": [
|
||||
"react",
|
||||
"reactjs",
|
||||
"redux"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "./lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"name": "react-redux",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.3",
|
||||
"redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/reduxjs/react-redux.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
|
||||
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
|
||||
"build:es": "babel src --out-dir es",
|
||||
"build:umd": "cross-env NODE_ENV=development rollup -c -o dist/react-redux.js",
|
||||
"build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/react-redux.min.js",
|
||||
"clean": "rimraf lib dist es coverage",
|
||||
"coverage": "codecov",
|
||||
"format": "prettier --write \"{src,test}/**/*.{js,ts}\" index.d.ts \"docs/**/*.md\"",
|
||||
"lint": "eslint src test/utils test/components test/hooks",
|
||||
"prepare": "npm run clean && npm run build",
|
||||
"pretest": "npm run lint",
|
||||
"test": "jest"
|
||||
},
|
||||
"unpkg": "dist/react-redux.js",
|
||||
"version": "7.2.0"
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import Provider from './components/Provider'
|
||||
import connectAdvanced from './components/connectAdvanced'
|
||||
import { ReactReduxContext } from './components/Context'
|
||||
import connect from './connect/connect'
|
||||
|
||||
import { useDispatch } from './hooks/useDispatch'
|
||||
import { useSelector } from './hooks/useSelector'
|
||||
import { useStore } from './hooks/useStore'
|
||||
|
||||
import { getBatch } from './utils/batch'
|
||||
import shallowEqual from './utils/shallowEqual'
|
||||
|
||||
// For other renderers besides ReactDOM and React Native, use the default noop batch function
|
||||
const batch = getBatch()
|
||||
|
||||
export {
|
||||
Provider,
|
||||
connectAdvanced,
|
||||
ReactReduxContext,
|
||||
connect,
|
||||
batch,
|
||||
useDispatch,
|
||||
useSelector,
|
||||
useStore,
|
||||
shallowEqual
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export const ReactReduxContext = /*#__PURE__*/ React.createContext(null)
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
ReactReduxContext.displayName = 'ReactRedux'
|
||||
}
|
||||
|
||||
export default ReactReduxContext
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
import React, { useMemo, useEffect } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { ReactReduxContext } from './Context'
|
||||
import Subscription from '../utils/Subscription'
|
||||
|
||||
function Provider({ store, context, children }) {
|
||||
const contextValue = useMemo(() => {
|
||||
const subscription = new Subscription(store)
|
||||
subscription.onStateChange = subscription.notifyNestedSubs
|
||||
return {
|
||||
store,
|
||||
subscription
|
||||
}
|
||||
}, [store])
|
||||
|
||||
const previousState = useMemo(() => store.getState(), [store])
|
||||
|
||||
useEffect(() => {
|
||||
const { subscription } = contextValue
|
||||
subscription.trySubscribe()
|
||||
|
||||
if (previousState !== store.getState()) {
|
||||
subscription.notifyNestedSubs()
|
||||
}
|
||||
return () => {
|
||||
subscription.tryUnsubscribe()
|
||||
subscription.onStateChange = null
|
||||
}
|
||||
}, [contextValue, previousState])
|
||||
|
||||
const Context = context || ReactReduxContext
|
||||
|
||||
return <Context.Provider value={contextValue}>{children}</Context.Provider>
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Provider.propTypes = {
|
||||
store: PropTypes.shape({
|
||||
subscribe: PropTypes.func.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
getState: PropTypes.func.isRequired
|
||||
}),
|
||||
context: PropTypes.object,
|
||||
children: PropTypes.any
|
||||
}
|
||||
}
|
||||
|
||||
export default Provider
|
||||
+485
@@ -0,0 +1,485 @@
|
||||
import hoistStatics from 'hoist-non-react-statics'
|
||||
import React, { useContext, useMemo, useRef, useReducer } from 'react'
|
||||
import { isValidElementType, isContextConsumer } from 'react-is'
|
||||
import Subscription from '../utils/Subscription'
|
||||
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
|
||||
|
||||
import { ReactReduxContext } from './Context'
|
||||
|
||||
// Define some constant arrays just to avoid re-creating these
|
||||
const EMPTY_ARRAY = []
|
||||
const NO_SUBSCRIPTION_ARRAY = [null, null]
|
||||
|
||||
const stringifyComponent = Comp => {
|
||||
try {
|
||||
return JSON.stringify(Comp)
|
||||
} catch (err) {
|
||||
return String(Comp)
|
||||
}
|
||||
}
|
||||
|
||||
function storeStateUpdatesReducer(state, action) {
|
||||
const [, updateCount] = state
|
||||
return [action.payload, updateCount + 1]
|
||||
}
|
||||
|
||||
function useIsomorphicLayoutEffectWithArgs(
|
||||
effectFunc,
|
||||
effectArgs,
|
||||
dependencies
|
||||
) {
|
||||
useIsomorphicLayoutEffect(() => effectFunc(...effectArgs), dependencies)
|
||||
}
|
||||
|
||||
function captureWrapperProps(
|
||||
lastWrapperProps,
|
||||
lastChildProps,
|
||||
renderIsScheduled,
|
||||
wrapperProps,
|
||||
actualChildProps,
|
||||
childPropsFromStoreUpdate,
|
||||
notifyNestedSubs
|
||||
) {
|
||||
// We want to capture the wrapper props and child props we used for later comparisons
|
||||
lastWrapperProps.current = wrapperProps
|
||||
lastChildProps.current = actualChildProps
|
||||
renderIsScheduled.current = false
|
||||
|
||||
// If the render was from a store update, clear out that reference and cascade the subscriber update
|
||||
if (childPropsFromStoreUpdate.current) {
|
||||
childPropsFromStoreUpdate.current = null
|
||||
notifyNestedSubs()
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeUpdates(
|
||||
shouldHandleStateChanges,
|
||||
store,
|
||||
subscription,
|
||||
childPropsSelector,
|
||||
lastWrapperProps,
|
||||
lastChildProps,
|
||||
renderIsScheduled,
|
||||
childPropsFromStoreUpdate,
|
||||
notifyNestedSubs,
|
||||
forceComponentUpdateDispatch
|
||||
) {
|
||||
// If we're not subscribed to the store, nothing to do here
|
||||
if (!shouldHandleStateChanges) return
|
||||
|
||||
// Capture values for checking if and when this component unmounts
|
||||
let didUnsubscribe = false
|
||||
let lastThrownError = null
|
||||
|
||||
// We'll run this callback every time a store subscription update propagates to this component
|
||||
const checkForUpdates = () => {
|
||||
if (didUnsubscribe) {
|
||||
// Don't run stale listeners.
|
||||
// Redux doesn't guarantee unsubscriptions happen until next dispatch.
|
||||
return
|
||||
}
|
||||
|
||||
const latestStoreState = store.getState()
|
||||
|
||||
let newChildProps, error
|
||||
try {
|
||||
// Actually run the selector with the most recent store state and wrapper props
|
||||
// to determine what the child props should be
|
||||
newChildProps = childPropsSelector(
|
||||
latestStoreState,
|
||||
lastWrapperProps.current
|
||||
)
|
||||
} catch (e) {
|
||||
error = e
|
||||
lastThrownError = e
|
||||
}
|
||||
|
||||
if (!error) {
|
||||
lastThrownError = null
|
||||
}
|
||||
|
||||
// If the child props haven't changed, nothing to do here - cascade the subscription update
|
||||
if (newChildProps === lastChildProps.current) {
|
||||
if (!renderIsScheduled.current) {
|
||||
notifyNestedSubs()
|
||||
}
|
||||
} else {
|
||||
// Save references to the new child props. Note that we track the "child props from store update"
|
||||
// as a ref instead of a useState/useReducer because we need a way to determine if that value has
|
||||
// been processed. If this went into useState/useReducer, we couldn't clear out the value without
|
||||
// forcing another re-render, which we don't want.
|
||||
lastChildProps.current = newChildProps
|
||||
childPropsFromStoreUpdate.current = newChildProps
|
||||
renderIsScheduled.current = true
|
||||
|
||||
// If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
|
||||
forceComponentUpdateDispatch({
|
||||
type: 'STORE_UPDATED',
|
||||
payload: {
|
||||
error
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Actually subscribe to the nearest connected ancestor (or store)
|
||||
subscription.onStateChange = checkForUpdates
|
||||
subscription.trySubscribe()
|
||||
|
||||
// Pull data from the store after first render in case the store has
|
||||
// changed since we began.
|
||||
checkForUpdates()
|
||||
|
||||
const unsubscribeWrapper = () => {
|
||||
didUnsubscribe = true
|
||||
subscription.tryUnsubscribe()
|
||||
subscription.onStateChange = null
|
||||
|
||||
if (lastThrownError) {
|
||||
// It's possible that we caught an error due to a bad mapState function, but the
|
||||
// parent re-rendered without this component and we're about to unmount.
|
||||
// This shouldn't happen as long as we do top-down subscriptions correctly, but
|
||||
// if we ever do those wrong, this throw will surface the error in our tests.
|
||||
// In that case, throw the error from here so it doesn't get lost.
|
||||
throw lastThrownError
|
||||
}
|
||||
}
|
||||
|
||||
return unsubscribeWrapper
|
||||
}
|
||||
|
||||
const initStateUpdates = () => [null, 0]
|
||||
|
||||
export default function connectAdvanced(
|
||||
/*
|
||||
selectorFactory is a func that is responsible for returning the selector function used to
|
||||
compute new props from state, props, and dispatch. For example:
|
||||
|
||||
export default connectAdvanced((dispatch, options) => (state, props) => ({
|
||||
thing: state.things[props.thingId],
|
||||
saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
|
||||
}))(YourComponent)
|
||||
|
||||
Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
|
||||
outside of their selector as an optimization. Options passed to connectAdvanced are passed to
|
||||
the selectorFactory, along with displayName and WrappedComponent, as the second argument.
|
||||
|
||||
Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
|
||||
props. Do not use connectAdvanced directly without memoizing results between calls to your
|
||||
selector, otherwise the Connect component will re-render on every state or props change.
|
||||
*/
|
||||
selectorFactory,
|
||||
// options object:
|
||||
{
|
||||
// the func used to compute this HOC's displayName from the wrapped component's displayName.
|
||||
// probably overridden by wrapper functions such as connect()
|
||||
getDisplayName = name => `ConnectAdvanced(${name})`,
|
||||
|
||||
// shown in error messages
|
||||
// probably overridden by wrapper functions such as connect()
|
||||
methodName = 'connectAdvanced',
|
||||
|
||||
// REMOVED: if defined, the name of the property passed to the wrapped element indicating the number of
|
||||
// calls to render. useful for watching in react devtools for unnecessary re-renders.
|
||||
renderCountProp = undefined,
|
||||
|
||||
// determines whether this HOC subscribes to store changes
|
||||
shouldHandleStateChanges = true,
|
||||
|
||||
// REMOVED: the key of props/context to get the store
|
||||
storeKey = 'store',
|
||||
|
||||
// REMOVED: expose the wrapped component via refs
|
||||
withRef = false,
|
||||
|
||||
// use React's forwardRef to expose a ref of the wrapped component
|
||||
forwardRef = false,
|
||||
|
||||
// the context consumer to use
|
||||
context = ReactReduxContext,
|
||||
|
||||
// additional options are passed through to the selectorFactory
|
||||
...connectOptions
|
||||
} = {}
|
||||
) {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (renderCountProp !== undefined) {
|
||||
throw new Error(
|
||||
`renderCountProp is removed. render counting is built into the latest React Dev Tools profiling extension`
|
||||
)
|
||||
}
|
||||
if (withRef) {
|
||||
throw new Error(
|
||||
'withRef is removed. To access the wrapped instance, use a ref on the connected component'
|
||||
)
|
||||
}
|
||||
|
||||
const customStoreWarningMessage =
|
||||
'To use a custom Redux store for specific components, create a custom React context with ' +
|
||||
"React.createContext(), and pass the context object to React Redux's Provider and specific components" +
|
||||
' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' +
|
||||
'You may also pass a {context : MyContext} option to connect'
|
||||
|
||||
if (storeKey !== 'store') {
|
||||
throw new Error(
|
||||
'storeKey has been removed and does not do anything. ' +
|
||||
customStoreWarningMessage
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Context = context
|
||||
|
||||
return function wrapWithConnect(WrappedComponent) {
|
||||
if (
|
||||
process.env.NODE_ENV !== 'production' &&
|
||||
!isValidElementType(WrappedComponent)
|
||||
) {
|
||||
throw new Error(
|
||||
`You must pass a component to the function returned by ` +
|
||||
`${methodName}. Instead received ${stringifyComponent(
|
||||
WrappedComponent
|
||||
)}`
|
||||
)
|
||||
}
|
||||
|
||||
const wrappedComponentName =
|
||||
WrappedComponent.displayName || WrappedComponent.name || 'Component'
|
||||
|
||||
const displayName = getDisplayName(wrappedComponentName)
|
||||
|
||||
const selectorFactoryOptions = {
|
||||
...connectOptions,
|
||||
getDisplayName,
|
||||
methodName,
|
||||
renderCountProp,
|
||||
shouldHandleStateChanges,
|
||||
storeKey,
|
||||
displayName,
|
||||
wrappedComponentName,
|
||||
WrappedComponent
|
||||
}
|
||||
|
||||
const { pure } = connectOptions
|
||||
|
||||
function createChildSelector(store) {
|
||||
return selectorFactory(store.dispatch, selectorFactoryOptions)
|
||||
}
|
||||
|
||||
// If we aren't running in "pure" mode, we don't want to memoize values.
|
||||
// To avoid conditionally calling hooks, we fall back to a tiny wrapper
|
||||
// that just executes the given callback immediately.
|
||||
const usePureOnlyMemo = pure ? useMemo : callback => callback()
|
||||
|
||||
function ConnectFunction(props) {
|
||||
const [propsContext, forwardedRef, wrapperProps] = useMemo(() => {
|
||||
// Distinguish between actual "data" props that were passed to the wrapper component,
|
||||
// and values needed to control behavior (forwarded refs, alternate context instances).
|
||||
// To maintain the wrapperProps object reference, memoize this destructuring.
|
||||
const { forwardedRef, ...wrapperProps } = props
|
||||
return [props.context, forwardedRef, wrapperProps]
|
||||
}, [props])
|
||||
|
||||
const ContextToUse = useMemo(() => {
|
||||
// Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
|
||||
// Memoize the check that determines which context instance we should use.
|
||||
return propsContext &&
|
||||
propsContext.Consumer &&
|
||||
isContextConsumer(<propsContext.Consumer />)
|
||||
? propsContext
|
||||
: Context
|
||||
}, [propsContext, Context])
|
||||
|
||||
// Retrieve the store and ancestor subscription via context, if available
|
||||
const contextValue = useContext(ContextToUse)
|
||||
|
||||
// The store _must_ exist as either a prop or in context.
|
||||
// We'll check to see if it _looks_ like a Redux store first.
|
||||
// This allows us to pass through a `store` prop that is just a plain value.
|
||||
const didStoreComeFromProps =
|
||||
Boolean(props.store) &&
|
||||
Boolean(props.store.getState) &&
|
||||
Boolean(props.store.dispatch)
|
||||
const didStoreComeFromContext =
|
||||
Boolean(contextValue) && Boolean(contextValue.store)
|
||||
|
||||
if (
|
||||
process.env.NODE_ENV !== 'production' &&
|
||||
!didStoreComeFromProps &&
|
||||
!didStoreComeFromContext
|
||||
) {
|
||||
throw new Error(
|
||||
`Could not find "store" in the context of ` +
|
||||
`"${displayName}". Either wrap the root component in a <Provider>, ` +
|
||||
`or pass a custom React context provider to <Provider> and the corresponding ` +
|
||||
`React context consumer to ${displayName} in connect options.`
|
||||
)
|
||||
}
|
||||
|
||||
// Based on the previous check, one of these must be true
|
||||
const store = didStoreComeFromProps ? props.store : contextValue.store
|
||||
|
||||
const childPropsSelector = useMemo(() => {
|
||||
// The child props selector needs the store reference as an input.
|
||||
// Re-create this selector whenever the store changes.
|
||||
return createChildSelector(store)
|
||||
}, [store])
|
||||
|
||||
const [subscription, notifyNestedSubs] = useMemo(() => {
|
||||
if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY
|
||||
|
||||
// This Subscription's source should match where store came from: props vs. context. A component
|
||||
// connected to the store via props shouldn't use subscription from context, or vice versa.
|
||||
const subscription = new Subscription(
|
||||
store,
|
||||
didStoreComeFromProps ? null : contextValue.subscription
|
||||
)
|
||||
|
||||
// `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
|
||||
// the middle of the notification loop, where `subscription` will then be null. This can
|
||||
// probably be avoided if Subscription's listeners logic is changed to not call listeners
|
||||
// that have been unsubscribed in the middle of the notification loop.
|
||||
const notifyNestedSubs = subscription.notifyNestedSubs.bind(
|
||||
subscription
|
||||
)
|
||||
|
||||
return [subscription, notifyNestedSubs]
|
||||
}, [store, didStoreComeFromProps, contextValue])
|
||||
|
||||
// Determine what {store, subscription} value should be put into nested context, if necessary,
|
||||
// and memoize that value to avoid unnecessary context updates.
|
||||
const overriddenContextValue = useMemo(() => {
|
||||
if (didStoreComeFromProps) {
|
||||
// This component is directly subscribed to a store from props.
|
||||
// We don't want descendants reading from this store - pass down whatever
|
||||
// the existing context value is from the nearest connected ancestor.
|
||||
return contextValue
|
||||
}
|
||||
|
||||
// Otherwise, put this component's subscription instance into context, so that
|
||||
// connected descendants won't update until after this component is done
|
||||
return {
|
||||
...contextValue,
|
||||
subscription
|
||||
}
|
||||
}, [didStoreComeFromProps, contextValue, subscription])
|
||||
|
||||
// We need to force this wrapper component to re-render whenever a Redux store update
|
||||
// causes a change to the calculated child component props (or we caught an error in mapState)
|
||||
const [
|
||||
[previousStateUpdateResult],
|
||||
forceComponentUpdateDispatch
|
||||
] = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates)
|
||||
|
||||
// Propagate any mapState/mapDispatch errors upwards
|
||||
if (previousStateUpdateResult && previousStateUpdateResult.error) {
|
||||
throw previousStateUpdateResult.error
|
||||
}
|
||||
|
||||
// Set up refs to coordinate values between the subscription effect and the render logic
|
||||
const lastChildProps = useRef()
|
||||
const lastWrapperProps = useRef(wrapperProps)
|
||||
const childPropsFromStoreUpdate = useRef()
|
||||
const renderIsScheduled = useRef(false)
|
||||
|
||||
const actualChildProps = usePureOnlyMemo(() => {
|
||||
// Tricky logic here:
|
||||
// - This render may have been triggered by a Redux store update that produced new child props
|
||||
// - However, we may have gotten new wrapper props after that
|
||||
// If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
|
||||
// But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
|
||||
// So, we'll use the child props from store update only if the wrapper props are the same as last time.
|
||||
if (
|
||||
childPropsFromStoreUpdate.current &&
|
||||
wrapperProps === lastWrapperProps.current
|
||||
) {
|
||||
return childPropsFromStoreUpdate.current
|
||||
}
|
||||
|
||||
// TODO We're reading the store directly in render() here. Bad idea?
|
||||
// This will likely cause Bad Things (TM) to happen in Concurrent Mode.
|
||||
// Note that we do this because on renders _not_ caused by store updates, we need the latest store state
|
||||
// to determine what the child props should be.
|
||||
return childPropsSelector(store.getState(), wrapperProps)
|
||||
}, [store, previousStateUpdateResult, wrapperProps])
|
||||
|
||||
// We need this to execute synchronously every time we re-render. However, React warns
|
||||
// about useLayoutEffect in SSR, so we try to detect environment and fall back to
|
||||
// just useEffect instead to avoid the warning, since neither will run anyway.
|
||||
useIsomorphicLayoutEffectWithArgs(captureWrapperProps, [
|
||||
lastWrapperProps,
|
||||
lastChildProps,
|
||||
renderIsScheduled,
|
||||
wrapperProps,
|
||||
actualChildProps,
|
||||
childPropsFromStoreUpdate,
|
||||
notifyNestedSubs
|
||||
])
|
||||
|
||||
// Our re-subscribe logic only runs when the store/subscription setup changes
|
||||
useIsomorphicLayoutEffectWithArgs(
|
||||
subscribeUpdates,
|
||||
[
|
||||
shouldHandleStateChanges,
|
||||
store,
|
||||
subscription,
|
||||
childPropsSelector,
|
||||
lastWrapperProps,
|
||||
lastChildProps,
|
||||
renderIsScheduled,
|
||||
childPropsFromStoreUpdate,
|
||||
notifyNestedSubs,
|
||||
forceComponentUpdateDispatch
|
||||
],
|
||||
[store, subscription, childPropsSelector]
|
||||
)
|
||||
|
||||
// Now that all that's done, we can finally try to actually render the child component.
|
||||
// We memoize the elements for the rendered child component as an optimization.
|
||||
const renderedWrappedComponent = useMemo(
|
||||
() => <WrappedComponent {...actualChildProps} ref={forwardedRef} />,
|
||||
[forwardedRef, WrappedComponent, actualChildProps]
|
||||
)
|
||||
|
||||
// If React sees the exact same element reference as last time, it bails out of re-rendering
|
||||
// that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
|
||||
const renderedChild = useMemo(() => {
|
||||
if (shouldHandleStateChanges) {
|
||||
// If this component is subscribed to store updates, we need to pass its own
|
||||
// subscription instance down to our descendants. That means rendering the same
|
||||
// Context instance, and putting a different value into the context.
|
||||
return (
|
||||
<ContextToUse.Provider value={overriddenContextValue}>
|
||||
{renderedWrappedComponent}
|
||||
</ContextToUse.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
return renderedWrappedComponent
|
||||
}, [ContextToUse, renderedWrappedComponent, overriddenContextValue])
|
||||
|
||||
return renderedChild
|
||||
}
|
||||
|
||||
// If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
|
||||
const Connect = pure ? React.memo(ConnectFunction) : ConnectFunction
|
||||
|
||||
Connect.WrappedComponent = WrappedComponent
|
||||
Connect.displayName = displayName
|
||||
|
||||
if (forwardRef) {
|
||||
const forwarded = React.forwardRef(function forwardConnectRef(
|
||||
props,
|
||||
ref
|
||||
) {
|
||||
return <Connect {...props} forwardedRef={ref} />
|
||||
})
|
||||
|
||||
forwarded.displayName = displayName
|
||||
forwarded.WrappedComponent = WrappedComponent
|
||||
return hoistStatics(forwarded, WrappedComponent)
|
||||
}
|
||||
|
||||
return hoistStatics(Connect, WrappedComponent)
|
||||
}
|
||||
}
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
import connectAdvanced from '../components/connectAdvanced'
|
||||
import shallowEqual from '../utils/shallowEqual'
|
||||
import defaultMapDispatchToPropsFactories from './mapDispatchToProps'
|
||||
import defaultMapStateToPropsFactories from './mapStateToProps'
|
||||
import defaultMergePropsFactories from './mergeProps'
|
||||
import defaultSelectorFactory from './selectorFactory'
|
||||
|
||||
/*
|
||||
connect is a facade over connectAdvanced. It turns its args into a compatible
|
||||
selectorFactory, which has the signature:
|
||||
|
||||
(dispatch, options) => (nextState, nextOwnProps) => nextFinalProps
|
||||
|
||||
connect passes its args to connectAdvanced as options, which will in turn pass them to
|
||||
selectorFactory each time a Connect component instance is instantiated or hot reloaded.
|
||||
|
||||
selectorFactory returns a final props selector from its mapStateToProps,
|
||||
mapStateToPropsFactories, mapDispatchToProps, mapDispatchToPropsFactories, mergeProps,
|
||||
mergePropsFactories, and pure args.
|
||||
|
||||
The resulting final props selector is called by the Connect component instance whenever
|
||||
it receives new props or store state.
|
||||
*/
|
||||
|
||||
function match(arg, factories, name) {
|
||||
for (let i = factories.length - 1; i >= 0; i--) {
|
||||
const result = factories[i](arg)
|
||||
if (result) return result
|
||||
}
|
||||
|
||||
return (dispatch, options) => {
|
||||
throw new Error(
|
||||
`Invalid value of type ${typeof arg} for ${name} argument when connecting component ${
|
||||
options.wrappedComponentName
|
||||
}.`
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function strictEqual(a, b) {
|
||||
return a === b
|
||||
}
|
||||
|
||||
// createConnect with default args builds the 'official' connect behavior. Calling it with
|
||||
// different options opens up some testing and extensibility scenarios
|
||||
export function createConnect({
|
||||
connectHOC = connectAdvanced,
|
||||
mapStateToPropsFactories = defaultMapStateToPropsFactories,
|
||||
mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
|
||||
mergePropsFactories = defaultMergePropsFactories,
|
||||
selectorFactory = defaultSelectorFactory
|
||||
} = {}) {
|
||||
return function connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
mergeProps,
|
||||
{
|
||||
pure = true,
|
||||
areStatesEqual = strictEqual,
|
||||
areOwnPropsEqual = shallowEqual,
|
||||
areStatePropsEqual = shallowEqual,
|
||||
areMergedPropsEqual = shallowEqual,
|
||||
...extraOptions
|
||||
} = {}
|
||||
) {
|
||||
const initMapStateToProps = match(
|
||||
mapStateToProps,
|
||||
mapStateToPropsFactories,
|
||||
'mapStateToProps'
|
||||
)
|
||||
const initMapDispatchToProps = match(
|
||||
mapDispatchToProps,
|
||||
mapDispatchToPropsFactories,
|
||||
'mapDispatchToProps'
|
||||
)
|
||||
const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')
|
||||
|
||||
return connectHOC(selectorFactory, {
|
||||
// used in error messages
|
||||
methodName: 'connect',
|
||||
|
||||
// used to compute Connect's displayName from the wrapped component's displayName.
|
||||
getDisplayName: name => `Connect(${name})`,
|
||||
|
||||
// if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
|
||||
shouldHandleStateChanges: Boolean(mapStateToProps),
|
||||
|
||||
// passed through to selectorFactory
|
||||
initMapStateToProps,
|
||||
initMapDispatchToProps,
|
||||
initMergeProps,
|
||||
pure,
|
||||
areStatesEqual,
|
||||
areOwnPropsEqual,
|
||||
areStatePropsEqual,
|
||||
areMergedPropsEqual,
|
||||
|
||||
// any extra options args can override defaults of connect or connectAdvanced
|
||||
...extraOptions
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default /*#__PURE__*/ createConnect()
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps'
|
||||
|
||||
export function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
|
||||
return typeof mapDispatchToProps === 'function'
|
||||
? wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps')
|
||||
: undefined
|
||||
}
|
||||
|
||||
export function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
|
||||
return !mapDispatchToProps
|
||||
? wrapMapToPropsConstant(dispatch => ({ dispatch }))
|
||||
: undefined
|
||||
}
|
||||
|
||||
export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
|
||||
return mapDispatchToProps && typeof mapDispatchToProps === 'object'
|
||||
? wrapMapToPropsConstant(dispatch =>
|
||||
bindActionCreators(mapDispatchToProps, dispatch)
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
|
||||
export default [
|
||||
whenMapDispatchToPropsIsFunction,
|
||||
whenMapDispatchToPropsIsMissing,
|
||||
whenMapDispatchToPropsIsObject
|
||||
]
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps'
|
||||
|
||||
export function whenMapStateToPropsIsFunction(mapStateToProps) {
|
||||
return typeof mapStateToProps === 'function'
|
||||
? wrapMapToPropsFunc(mapStateToProps, 'mapStateToProps')
|
||||
: undefined
|
||||
}
|
||||
|
||||
export function whenMapStateToPropsIsMissing(mapStateToProps) {
|
||||
return !mapStateToProps ? wrapMapToPropsConstant(() => ({})) : undefined
|
||||
}
|
||||
|
||||
export default [whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing]
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
import verifyPlainObject from '../utils/verifyPlainObject'
|
||||
|
||||
export function defaultMergeProps(stateProps, dispatchProps, ownProps) {
|
||||
return { ...ownProps, ...stateProps, ...dispatchProps }
|
||||
}
|
||||
|
||||
export function wrapMergePropsFunc(mergeProps) {
|
||||
return function initMergePropsProxy(
|
||||
dispatch,
|
||||
{ displayName, pure, areMergedPropsEqual }
|
||||
) {
|
||||
let hasRunOnce = false
|
||||
let mergedProps
|
||||
|
||||
return function mergePropsProxy(stateProps, dispatchProps, ownProps) {
|
||||
const nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps)
|
||||
|
||||
if (hasRunOnce) {
|
||||
if (!pure || !areMergedPropsEqual(nextMergedProps, mergedProps))
|
||||
mergedProps = nextMergedProps
|
||||
} else {
|
||||
hasRunOnce = true
|
||||
mergedProps = nextMergedProps
|
||||
|
||||
if (process.env.NODE_ENV !== 'production')
|
||||
verifyPlainObject(mergedProps, displayName, 'mergeProps')
|
||||
}
|
||||
|
||||
return mergedProps
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function whenMergePropsIsFunction(mergeProps) {
|
||||
return typeof mergeProps === 'function'
|
||||
? wrapMergePropsFunc(mergeProps)
|
||||
: undefined
|
||||
}
|
||||
|
||||
export function whenMergePropsIsOmitted(mergeProps) {
|
||||
return !mergeProps ? () => defaultMergeProps : undefined
|
||||
}
|
||||
|
||||
export default [whenMergePropsIsFunction, whenMergePropsIsOmitted]
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
import verifySubselectors from './verifySubselectors'
|
||||
|
||||
export function impureFinalPropsSelectorFactory(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
mergeProps,
|
||||
dispatch
|
||||
) {
|
||||
return function impureFinalPropsSelector(state, ownProps) {
|
||||
return mergeProps(
|
||||
mapStateToProps(state, ownProps),
|
||||
mapDispatchToProps(dispatch, ownProps),
|
||||
ownProps
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export function pureFinalPropsSelectorFactory(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
mergeProps,
|
||||
dispatch,
|
||||
{ areStatesEqual, areOwnPropsEqual, areStatePropsEqual }
|
||||
) {
|
||||
let hasRunAtLeastOnce = false
|
||||
let state
|
||||
let ownProps
|
||||
let stateProps
|
||||
let dispatchProps
|
||||
let mergedProps
|
||||
|
||||
function handleFirstCall(firstState, firstOwnProps) {
|
||||
state = firstState
|
||||
ownProps = firstOwnProps
|
||||
stateProps = mapStateToProps(state, ownProps)
|
||||
dispatchProps = mapDispatchToProps(dispatch, ownProps)
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
|
||||
hasRunAtLeastOnce = true
|
||||
return mergedProps
|
||||
}
|
||||
|
||||
function handleNewPropsAndNewState() {
|
||||
stateProps = mapStateToProps(state, ownProps)
|
||||
|
||||
if (mapDispatchToProps.dependsOnOwnProps)
|
||||
dispatchProps = mapDispatchToProps(dispatch, ownProps)
|
||||
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
|
||||
return mergedProps
|
||||
}
|
||||
|
||||
function handleNewProps() {
|
||||
if (mapStateToProps.dependsOnOwnProps)
|
||||
stateProps = mapStateToProps(state, ownProps)
|
||||
|
||||
if (mapDispatchToProps.dependsOnOwnProps)
|
||||
dispatchProps = mapDispatchToProps(dispatch, ownProps)
|
||||
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
|
||||
return mergedProps
|
||||
}
|
||||
|
||||
function handleNewState() {
|
||||
const nextStateProps = mapStateToProps(state, ownProps)
|
||||
const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps)
|
||||
stateProps = nextStateProps
|
||||
|
||||
if (statePropsChanged)
|
||||
mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
|
||||
|
||||
return mergedProps
|
||||
}
|
||||
|
||||
function handleSubsequentCalls(nextState, nextOwnProps) {
|
||||
const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps)
|
||||
const stateChanged = !areStatesEqual(nextState, state)
|
||||
state = nextState
|
||||
ownProps = nextOwnProps
|
||||
|
||||
if (propsChanged && stateChanged) return handleNewPropsAndNewState()
|
||||
if (propsChanged) return handleNewProps()
|
||||
if (stateChanged) return handleNewState()
|
||||
return mergedProps
|
||||
}
|
||||
|
||||
return function pureFinalPropsSelector(nextState, nextOwnProps) {
|
||||
return hasRunAtLeastOnce
|
||||
? handleSubsequentCalls(nextState, nextOwnProps)
|
||||
: handleFirstCall(nextState, nextOwnProps)
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Add more comments
|
||||
|
||||
// If pure is true, the selector returned by selectorFactory will memoize its results,
|
||||
// allowing connectAdvanced's shouldComponentUpdate to return false if final
|
||||
// props have not changed. If false, the selector will always return a new
|
||||
// object and shouldComponentUpdate will always return true.
|
||||
|
||||
export default function finalPropsSelectorFactory(
|
||||
dispatch,
|
||||
{ initMapStateToProps, initMapDispatchToProps, initMergeProps, ...options }
|
||||
) {
|
||||
const mapStateToProps = initMapStateToProps(dispatch, options)
|
||||
const mapDispatchToProps = initMapDispatchToProps(dispatch, options)
|
||||
const mergeProps = initMergeProps(dispatch, options)
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
verifySubselectors(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
mergeProps,
|
||||
options.displayName
|
||||
)
|
||||
}
|
||||
|
||||
const selectorFactory = options.pure
|
||||
? pureFinalPropsSelectorFactory
|
||||
: impureFinalPropsSelectorFactory
|
||||
|
||||
return selectorFactory(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
mergeProps,
|
||||
dispatch,
|
||||
options
|
||||
)
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import warning from '../utils/warning'
|
||||
|
||||
function verify(selector, methodName, displayName) {
|
||||
if (!selector) {
|
||||
throw new Error(`Unexpected value for ${methodName} in ${displayName}.`)
|
||||
} else if (
|
||||
methodName === 'mapStateToProps' ||
|
||||
methodName === 'mapDispatchToProps'
|
||||
) {
|
||||
if (!Object.prototype.hasOwnProperty.call(selector, 'dependsOnOwnProps')) {
|
||||
warning(
|
||||
`The selector for ${methodName} of ${displayName} did not specify a value for dependsOnOwnProps.`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function verifySubselectors(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
mergeProps,
|
||||
displayName
|
||||
) {
|
||||
verify(mapStateToProps, 'mapStateToProps', displayName)
|
||||
verify(mapDispatchToProps, 'mapDispatchToProps', displayName)
|
||||
verify(mergeProps, 'mergeProps', displayName)
|
||||
}
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
import verifyPlainObject from '../utils/verifyPlainObject'
|
||||
|
||||
export function wrapMapToPropsConstant(getConstant) {
|
||||
return function initConstantSelector(dispatch, options) {
|
||||
const constant = getConstant(dispatch, options)
|
||||
|
||||
function constantSelector() {
|
||||
return constant
|
||||
}
|
||||
constantSelector.dependsOnOwnProps = false
|
||||
return constantSelector
|
||||
}
|
||||
}
|
||||
|
||||
// dependsOnOwnProps is used by createMapToPropsProxy to determine whether to pass props as args
|
||||
// to the mapToProps function being wrapped. It is also used by makePurePropsSelector to determine
|
||||
// whether mapToProps needs to be invoked when props have changed.
|
||||
//
|
||||
// A length of one signals that mapToProps does not depend on props from the parent component.
|
||||
// A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
|
||||
// therefore not reporting its length accurately..
|
||||
export function getDependsOnOwnProps(mapToProps) {
|
||||
return mapToProps.dependsOnOwnProps !== null &&
|
||||
mapToProps.dependsOnOwnProps !== undefined
|
||||
? Boolean(mapToProps.dependsOnOwnProps)
|
||||
: mapToProps.length !== 1
|
||||
}
|
||||
|
||||
// Used by whenMapStateToPropsIsFunction and whenMapDispatchToPropsIsFunction,
|
||||
// this function wraps mapToProps in a proxy function which does several things:
|
||||
//
|
||||
// * Detects whether the mapToProps function being called depends on props, which
|
||||
// is used by selectorFactory to decide if it should reinvoke on props changes.
|
||||
//
|
||||
// * On first call, handles mapToProps if returns another function, and treats that
|
||||
// new function as the true mapToProps for subsequent calls.
|
||||
//
|
||||
// * On first call, verifies the first result is a plain object, in order to warn
|
||||
// the developer that their mapToProps function is not returning a valid result.
|
||||
//
|
||||
export function wrapMapToPropsFunc(mapToProps, methodName) {
|
||||
return function initProxySelector(dispatch, { displayName }) {
|
||||
const proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
|
||||
return proxy.dependsOnOwnProps
|
||||
? proxy.mapToProps(stateOrDispatch, ownProps)
|
||||
: proxy.mapToProps(stateOrDispatch)
|
||||
}
|
||||
|
||||
// allow detectFactoryAndVerify to get ownProps
|
||||
proxy.dependsOnOwnProps = true
|
||||
|
||||
proxy.mapToProps = function detectFactoryAndVerify(
|
||||
stateOrDispatch,
|
||||
ownProps
|
||||
) {
|
||||
proxy.mapToProps = mapToProps
|
||||
proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps)
|
||||
let props = proxy(stateOrDispatch, ownProps)
|
||||
|
||||
if (typeof props === 'function') {
|
||||
proxy.mapToProps = props
|
||||
proxy.dependsOnOwnProps = getDependsOnOwnProps(props)
|
||||
props = proxy(stateOrDispatch, ownProps)
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production')
|
||||
verifyPlainObject(props, displayName, methodName)
|
||||
|
||||
return props
|
||||
}
|
||||
|
||||
return proxy
|
||||
}
|
||||
}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import { ReactReduxContext } from '../components/Context'
|
||||
import { useStore as useDefaultStore, createStoreHook } from './useStore'
|
||||
|
||||
/**
|
||||
* Hook factory, which creates a `useDispatch` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useDispatch` hook bound to the specified context.
|
||||
*/
|
||||
export function createDispatchHook(context = ReactReduxContext) {
|
||||
const useStore =
|
||||
context === ReactReduxContext ? useDefaultStore : createStoreHook(context)
|
||||
|
||||
return function useDispatch() {
|
||||
const store = useStore()
|
||||
return store.dispatch
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A hook to access the redux `dispatch` function.
|
||||
*
|
||||
* @returns {any|function} redux store's `dispatch` function
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React, { useCallback } from 'react'
|
||||
* import { useDispatch } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = ({ value }) => {
|
||||
* const dispatch = useDispatch()
|
||||
* const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
|
||||
* return (
|
||||
* <div>
|
||||
* <span>{value}</span>
|
||||
* <button onClick={increaseCounter}>Increase counter</button>
|
||||
* </div>
|
||||
* )
|
||||
* }
|
||||
*/
|
||||
export const useDispatch = /*#__PURE__*/ createDispatchHook()
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { useContext } from 'react'
|
||||
import { ReactReduxContext } from '../components/Context'
|
||||
|
||||
/**
|
||||
* A hook to access the value of the `ReactReduxContext`. This is a low-level
|
||||
* hook that you should usually not need to call directly.
|
||||
*
|
||||
* @returns {any} the value of the `ReactReduxContext`
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useReduxContext } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = ({ value }) => {
|
||||
* const { store } = useReduxContext()
|
||||
* return <div>{store.getState()}</div>
|
||||
* }
|
||||
*/
|
||||
export function useReduxContext() {
|
||||
const contextValue = useContext(ReactReduxContext)
|
||||
|
||||
if (process.env.NODE_ENV !== 'production' && !contextValue) {
|
||||
throw new Error(
|
||||
'could not find react-redux context value; please ensure the component is wrapped in a <Provider>'
|
||||
)
|
||||
}
|
||||
|
||||
return contextValue
|
||||
}
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
import { useReducer, useRef, useMemo, useContext } from 'react'
|
||||
import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
|
||||
import Subscription from '../utils/Subscription'
|
||||
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
|
||||
import { ReactReduxContext } from '../components/Context'
|
||||
|
||||
const refEquality = (a, b) => a === b
|
||||
|
||||
function useSelectorWithStoreAndSubscription(
|
||||
selector,
|
||||
equalityFn,
|
||||
store,
|
||||
contextSub
|
||||
) {
|
||||
const [, forceRender] = useReducer(s => s + 1, 0)
|
||||
|
||||
const subscription = useMemo(() => new Subscription(store, contextSub), [
|
||||
store,
|
||||
contextSub
|
||||
])
|
||||
|
||||
const latestSubscriptionCallbackError = useRef()
|
||||
const latestSelector = useRef()
|
||||
const latestSelectedState = useRef()
|
||||
|
||||
let selectedState
|
||||
|
||||
try {
|
||||
if (
|
||||
selector !== latestSelector.current ||
|
||||
latestSubscriptionCallbackError.current
|
||||
) {
|
||||
selectedState = selector(store.getState())
|
||||
} else {
|
||||
selectedState = latestSelectedState.current
|
||||
}
|
||||
} catch (err) {
|
||||
if (latestSubscriptionCallbackError.current) {
|
||||
err.message += `\nThe error may be correlated with this previous error:\n${latestSubscriptionCallbackError.current.stack}\n\n`
|
||||
}
|
||||
|
||||
throw err
|
||||
}
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
latestSelector.current = selector
|
||||
latestSelectedState.current = selectedState
|
||||
latestSubscriptionCallbackError.current = undefined
|
||||
})
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
function checkForUpdates() {
|
||||
try {
|
||||
const newSelectedState = latestSelector.current(store.getState())
|
||||
|
||||
if (equalityFn(newSelectedState, latestSelectedState.current)) {
|
||||
return
|
||||
}
|
||||
|
||||
latestSelectedState.current = newSelectedState
|
||||
} catch (err) {
|
||||
// we ignore all errors here, since when the component
|
||||
// is re-rendered, the selectors are called again, and
|
||||
// will throw again, if neither props nor store state
|
||||
// changed
|
||||
latestSubscriptionCallbackError.current = err
|
||||
}
|
||||
|
||||
forceRender({})
|
||||
}
|
||||
|
||||
subscription.onStateChange = checkForUpdates
|
||||
subscription.trySubscribe()
|
||||
|
||||
checkForUpdates()
|
||||
|
||||
return () => subscription.tryUnsubscribe()
|
||||
}, [store, subscription])
|
||||
|
||||
return selectedState
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook factory, which creates a `useSelector` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useSelector` hook bound to the specified context.
|
||||
*/
|
||||
export function createSelectorHook(context = ReactReduxContext) {
|
||||
const useReduxContext =
|
||||
context === ReactReduxContext
|
||||
? useDefaultReduxContext
|
||||
: () => useContext(context)
|
||||
return function useSelector(selector, equalityFn = refEquality) {
|
||||
if (process.env.NODE_ENV !== 'production' && !selector) {
|
||||
throw new Error(`You must pass a selector to useSelectors`)
|
||||
}
|
||||
const { store, subscription: contextSub } = useReduxContext()
|
||||
|
||||
return useSelectorWithStoreAndSubscription(
|
||||
selector,
|
||||
equalityFn,
|
||||
store,
|
||||
contextSub
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A hook to access the redux store's state. This hook takes a selector function
|
||||
* as an argument. The selector is called with the store state.
|
||||
*
|
||||
* This hook takes an optional equality comparison function as the second parameter
|
||||
* that allows you to customize the way the selected state is compared to determine
|
||||
* whether the component needs to be re-rendered.
|
||||
*
|
||||
* @param {Function} selector the selector function
|
||||
* @param {Function=} equalityFn the function that will be used to determine equality
|
||||
*
|
||||
* @returns {any} the selected state
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useSelector } from 'react-redux'
|
||||
*
|
||||
* export const CounterComponent = () => {
|
||||
* const counter = useSelector(state => state.counter)
|
||||
* return <div>{counter}</div>
|
||||
* }
|
||||
*/
|
||||
export const useSelector = /*#__PURE__*/ createSelectorHook()
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
import { useContext } from 'react'
|
||||
import { ReactReduxContext } from '../components/Context'
|
||||
import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
|
||||
|
||||
/**
|
||||
* Hook factory, which creates a `useStore` hook bound to a given context.
|
||||
*
|
||||
* @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
|
||||
* @returns {Function} A `useStore` hook bound to the specified context.
|
||||
*/
|
||||
export function createStoreHook(context = ReactReduxContext) {
|
||||
const useReduxContext =
|
||||
context === ReactReduxContext
|
||||
? useDefaultReduxContext
|
||||
: () => useContext(context)
|
||||
return function useStore() {
|
||||
const { store } = useReduxContext()
|
||||
return store
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A hook to access the redux store.
|
||||
*
|
||||
* @returns {any} the redux store
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* import React from 'react'
|
||||
* import { useStore } from 'react-redux'
|
||||
*
|
||||
* export const ExampleComponent = () => {
|
||||
* const store = useStore()
|
||||
* return <div>{store.getState()}</div>
|
||||
* }
|
||||
*/
|
||||
export const useStore = /*#__PURE__*/ createStoreHook()
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
import Provider from './components/Provider'
|
||||
import connectAdvanced from './components/connectAdvanced'
|
||||
import { ReactReduxContext } from './components/Context'
|
||||
import connect from './connect/connect'
|
||||
|
||||
import { useDispatch, createDispatchHook } from './hooks/useDispatch'
|
||||
import { useSelector, createSelectorHook } from './hooks/useSelector'
|
||||
import { useStore, createStoreHook } from './hooks/useStore'
|
||||
|
||||
import { setBatch } from './utils/batch'
|
||||
import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'
|
||||
import shallowEqual from './utils/shallowEqual'
|
||||
|
||||
setBatch(batch)
|
||||
|
||||
export {
|
||||
Provider,
|
||||
connectAdvanced,
|
||||
ReactReduxContext,
|
||||
connect,
|
||||
batch,
|
||||
useDispatch,
|
||||
createDispatchHook,
|
||||
useSelector,
|
||||
createSelectorHook,
|
||||
useStore,
|
||||
createStoreHook,
|
||||
shallowEqual
|
||||
}
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
import { getBatch } from './batch'
|
||||
|
||||
// encapsulates the subscription logic for connecting a component to the redux store, as
|
||||
// well as nesting subscriptions of descendant components, so that we can ensure the
|
||||
// ancestor components re-render before descendants
|
||||
|
||||
const nullListeners = { notify() {} }
|
||||
|
||||
function createListenerCollection() {
|
||||
const batch = getBatch()
|
||||
let first = null
|
||||
let last = null
|
||||
|
||||
return {
|
||||
clear() {
|
||||
first = null
|
||||
last = null
|
||||
},
|
||||
|
||||
notify() {
|
||||
batch(() => {
|
||||
let listener = first
|
||||
while (listener) {
|
||||
listener.callback()
|
||||
listener = listener.next
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
get() {
|
||||
let listeners = []
|
||||
let listener = first
|
||||
while (listener) {
|
||||
listeners.push(listener)
|
||||
listener = listener.next
|
||||
}
|
||||
return listeners
|
||||
},
|
||||
|
||||
subscribe(callback) {
|
||||
let isSubscribed = true
|
||||
|
||||
let listener = (last = {
|
||||
callback,
|
||||
next: null,
|
||||
prev: last
|
||||
})
|
||||
|
||||
if (listener.prev) {
|
||||
listener.prev.next = listener
|
||||
} else {
|
||||
first = listener
|
||||
}
|
||||
|
||||
return function unsubscribe() {
|
||||
if (!isSubscribed || first === null) return
|
||||
isSubscribed = false
|
||||
|
||||
if (listener.next) {
|
||||
listener.next.prev = listener.prev
|
||||
} else {
|
||||
last = listener.prev
|
||||
}
|
||||
if (listener.prev) {
|
||||
listener.prev.next = listener.next
|
||||
} else {
|
||||
first = listener.next
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default class Subscription {
|
||||
constructor(store, parentSub) {
|
||||
this.store = store
|
||||
this.parentSub = parentSub
|
||||
this.unsubscribe = null
|
||||
this.listeners = nullListeners
|
||||
|
||||
this.handleChangeWrapper = this.handleChangeWrapper.bind(this)
|
||||
}
|
||||
|
||||
addNestedSub(listener) {
|
||||
this.trySubscribe()
|
||||
return this.listeners.subscribe(listener)
|
||||
}
|
||||
|
||||
notifyNestedSubs() {
|
||||
this.listeners.notify()
|
||||
}
|
||||
|
||||
handleChangeWrapper() {
|
||||
if (this.onStateChange) {
|
||||
this.onStateChange()
|
||||
}
|
||||
}
|
||||
|
||||
isSubscribed() {
|
||||
return Boolean(this.unsubscribe)
|
||||
}
|
||||
|
||||
trySubscribe() {
|
||||
if (!this.unsubscribe) {
|
||||
this.unsubscribe = this.parentSub
|
||||
? this.parentSub.addNestedSub(this.handleChangeWrapper)
|
||||
: this.store.subscribe(this.handleChangeWrapper)
|
||||
|
||||
this.listeners = createListenerCollection()
|
||||
}
|
||||
}
|
||||
|
||||
tryUnsubscribe() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe()
|
||||
this.unsubscribe = null
|
||||
this.listeners.clear()
|
||||
this.listeners = nullListeners
|
||||
}
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
// Default to a dummy "batch" implementation that just runs the callback
|
||||
function defaultNoopBatch(callback) {
|
||||
callback()
|
||||
}
|
||||
|
||||
let batch = defaultNoopBatch
|
||||
|
||||
// Allow injecting another batching function later
|
||||
export const setBatch = newBatch => (batch = newBatch)
|
||||
|
||||
// Supply a getter just to skip dealing with ESM bindings
|
||||
export const getBatch = () => batch
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @param {any} obj The object to inspect.
|
||||
* @returns {boolean} True if the argument appears to be a plain object.
|
||||
*/
|
||||
export default function isPlainObject(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) return false
|
||||
|
||||
let proto = Object.getPrototypeOf(obj)
|
||||
if (proto === null) return true
|
||||
|
||||
let baseProto = proto
|
||||
while (Object.getPrototypeOf(baseProto) !== null) {
|
||||
baseProto = Object.getPrototypeOf(baseProto)
|
||||
}
|
||||
|
||||
return proto === baseProto
|
||||
}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
/* eslint-disable import/no-unresolved */
|
||||
export { unstable_batchedUpdates } from 'react-dom'
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
/* eslint-disable import/no-unresolved */
|
||||
import { unstable_batchedUpdates } from 'react-native'
|
||||
|
||||
export { unstable_batchedUpdates }
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
function is(x, y) {
|
||||
if (x === y) {
|
||||
return x !== 0 || y !== 0 || 1 / x === 1 / y
|
||||
} else {
|
||||
return x !== x && y !== y
|
||||
}
|
||||
}
|
||||
|
||||
export default function shallowEqual(objA, objB) {
|
||||
if (is(objA, objB)) return true
|
||||
|
||||
if (
|
||||
typeof objA !== 'object' ||
|
||||
objA === null ||
|
||||
typeof objB !== 'object' ||
|
||||
objB === null
|
||||
) {
|
||||
return false
|
||||
}
|
||||
|
||||
const keysA = Object.keys(objA)
|
||||
const keysB = Object.keys(objB)
|
||||
|
||||
if (keysA.length !== keysB.length) return false
|
||||
|
||||
for (let i = 0; i < keysA.length; i++) {
|
||||
if (
|
||||
!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
|
||||
!is(objA[keysA[i]], objB[keysA[i]])
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { useEffect, useLayoutEffect } from 'react'
|
||||
|
||||
// React currently throws a warning when using useLayoutEffect on the server.
|
||||
// To get around it, we can conditionally useEffect on the server (no-op) and
|
||||
// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
|
||||
// subscription callback always has the selector from the latest render commit
|
||||
// available, otherwise a store update may happen between render and the effect,
|
||||
// which may cause missed updates; we also must ensure the store subscription
|
||||
// is created synchronously, otherwise a store update may occur before the
|
||||
// subscription is created and an inconsistent state may be observed
|
||||
|
||||
export const useIsomorphicLayoutEffect =
|
||||
typeof window !== 'undefined' &&
|
||||
typeof window.document !== 'undefined' &&
|
||||
typeof window.document.createElement !== 'undefined'
|
||||
? useLayoutEffect
|
||||
: useEffect
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import { useLayoutEffect } from 'react'
|
||||
|
||||
// Under React Native, we know that we always want to use useLayoutEffect
|
||||
|
||||
export const useIsomorphicLayoutEffect = useLayoutEffect
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import isPlainObject from './isPlainObject'
|
||||
import warning from './warning'
|
||||
|
||||
export default function verifyPlainObject(value, displayName, methodName) {
|
||||
if (!isPlainObject(value)) {
|
||||
warning(
|
||||
`${methodName}() in ${displayName} must return a plain object. Instead received ${value}.`
|
||||
)
|
||||
}
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Prints a warning in the console if it exists.
|
||||
*
|
||||
* @param {String} message The warning message.
|
||||
* @returns {void}
|
||||
*/
|
||||
export default function warning(message) {
|
||||
/* eslint-disable no-console */
|
||||
if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
||||
console.error(message)
|
||||
}
|
||||
/* eslint-enable no-console */
|
||||
try {
|
||||
// This error was thrown as a convenience so that if you enable
|
||||
// "break on all exceptions" in your console,
|
||||
// it would pause the execution at this line.
|
||||
throw new Error(message)
|
||||
/* eslint-disable no-empty */
|
||||
} catch (e) {}
|
||||
/* eslint-enable no-empty */
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import { bindActionCreators } from 'redux'
|
||||
|
||||
export default function wrapActionCreators(actionCreators) {
|
||||
return dispatch => bindActionCreators(actionCreators, dispatch)
|
||||
}
|
||||
Reference in New Issue
Block a user