CODEWITHSUNDEEP
reactjsredux
nonopolarity
nonopolarity

Reputation: 150966

Is Redux able to connect any state and action dispatch to any component?

This app is a simple Counter... does any one know how to make the App able to display the count also (beside the counter showing it)? Can you edit online and fork a copy if you can?

https://stackblitz.com/edit/react-kkcgza?file=App.js

I can connect the "state and action" to the Counter component like below:

let connectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

export default connectedComponent;

Do I just do the same for App as well? I don't quite understand the principle: is it that you first have a "one and only" source of truth (the redux store), and then you can arbitrarily connect any state and/or action dispatch to any component, so that any component can have any state and dispatch, and re-rendering is minimized?

So Redux is really a "data store, and props injector"?

Quote from Learning React, 2nd Ed, Kirupa Chinnathambi, Addison-Wesley 2018:

You can initiate a state change and involve only the components that are impacted directly. This directness reduces a lot of overhead you would otherwise have to maintain to ensure that your data (and any changes to it) gets to its intended destination without causing unnecessary renders. Pretty cool, right?

Upvotes: 0

Views: 80

Answers (3)

user12908956
user12908956

Reputation:

You can use reselect for select states for example countValue with best practice and performance and then for more information see link below

You can see this answer for best practice work with react and redux

Upvotes: 1

trixn
trixn

Reputation: 16309

You wouldn't connect the root component (which I assume is <App>) to the store but probably render another component that is connected. Assuming you have this structure:

<MyStoreProvider>
    <App>
        <SomeComponent>
            <CounterDisplay />
        </SomeComponent>
        <Counter />
    </App>
</MyStoreProvider>

where CounterDisplay is connected to your store:

const CounterDisplay = ({count}) => (
    <p>{`The count is ${count}`}</p>
);

const mapStateToProps = state => ({count: state.count});

export default connect(mapStateToProps)(CounterDisplay);

Usually you would try to keep the connect as close as possible to the components that actually need state or actions to prevent re-rendering the whole tree and reducing the need to pass state down.

It's even easier to use with hooks:

const CounterDisplay = () => {
    const count = useSelector(state => state.count);

    return (
        <p>{`The count is ${count}`}</p>
    );
};

So Redux is really a "data store, and props injector"?

You could call it that. It's a state management library that allows you to subscribe to state changes and update state in a non-mutating comprehensible manner (to e.g. allow time-traveling through your state changes). It can actually be used completely without react. The actual bindings that allow it to be used conveniently with react are in a standalone react-redux package.

Upvotes: 1

miggy92
miggy92

Reputation: 70

Just do

import React from "react";
import Counter from "./Counter";
import { connect } from 'react-redux';

function App(props) {
  console.log("APP is re-rendering", props);

  return (
   <div>
    App Cunter: {props.countValue}
    <br/>
    App says hello
    <Counter />
   </div>
  );
}


export default connect( state => ({countValue: state.count}))(App)

You only need to connect App component that way to achieve what you want

Upvotes: 1

Related Questions