Redux is usually used with React-redux in order to simplify subscriptions to store state changes. In front of the Export page you need to use the connect method provided by React-Redux to connect to the Store and map state and action to the props of the component. The connect method returns a function that takes a component as its argument and returns a new component as a result of its execution. The principle is to make use of the high-order components of React. If you are not familiar with HOC, you need to read the official documentation.
Let’s write a simple version of CONNECT directly to understand how connect works.
Create a React application using create-react-app, and install redux and react-redux on YARN.
Initialize a simple store.
Next, instead of using the connect function, use the methods provided by Redux to bind the data to the component.
As you can see, subscribing to the state is tedious, and the same logic is overwritten in other components. Next we create a connect function of our own, create a new utils folder in SRC, and create the connect.js file in utils.
Connect (mapStateToProps, mapDispachToProp)(Component) Depending on how it is used, you can tell that a new function is returned by calling connect and a component is taken as an argument. We’ll add a return function to the connect function we just created.
This call returns a new method with properties from the original component, as well as state and action from the store. Create a new component and render the wrappedComponent passed as a parameter.
Then need to receive mapStateToProps mapDispachToProp give whole to WrappedComponent review mapStateToProp, mapDispachToProp usage:
const mapStateToProp = state => ({… }) const mapDispachToProp = dispatch => ({… })
That is, we call both methods and pass state and dispatch as arguments, whose return value is passed to the WrappedComponent as prop.
Is it ok to write it this way? When we call connect to process the component export, we might pass different props to the component in other places where the component is used. If we say this, the props passed cannot reach the WrappedComponent. There is also a need to pass the props deconstruction to the WrappedComponent.
To see if this is true, define mapStateToProps, mapDispachToProp, and also append text to App component props. <App text=”hello” />
It seems to have worked. This way we can get rid of the component’s superfluous code and make it much simpler all at once.
– Added two button clicks to trigger action status updates, however, clicking on the page doesn’t seem to work, the page doesn’t change at all, simply because the props of the component haven’t changed since the subscription store update.
If you test it again, you’ll be fine, but for now this function can only be used in your own project because it depends on the store in your project. Using it in other projects requires you to change the store path. React-redux does not allow users to modify its source code. React-redux uses the React context to provide a store for connect. Create a context.js file, create a context, and then import it in connect, replacing all stores in connect with context.
Add a Provider to the entry and exit of your application, so that you can use connect anywhere to retrieve the store value, and a simple version of connect is complete.
This simple version of connect just gives you an overview of what connect does for you, and once you understand how it works, you’ll be more comfortable using it. The implementation of the React-Redux library is much more complex, but the main process is similar and most of the implementation uses hook. The connect method is just the appearance of connectAdvanced. Connect turns the arGS received into a compatible selectorFactory. Pass it as a parameter to connectAdvanced, which passes it to wrapedComponent. Every time a wrapedComponent is instantiated or hot-loaded, Each selectorFactory updates a new props Selector, and when wrapedComponet receives the state in the new Store, the Props Selector is called to generate props.