score:27
you're getting too caught up on children components. you should structure your app so that you have connected components and non-connected components. non-connected components should be stateless, pure functions essentially, that take in all their requirements via props. connected components should use the connect
function to map redux state to props and redux dispatcher to props, and then be responsible for passing those props to child components.
you might have lots of connected components in an app, and lots of non-connected components. this post (by the creator of redux) discusses it in more detail, and talks about non-connected (dumb) components being responsible for actual display of ui, and connected (smart) components being responsible for composing non-connected components.
an example might be (using some newer syntax):
class image extends react {
render() {
return (
<div>
<h1>{this.props.name}</h1>
<img src={this.props.src} />
<button onclick={this.props.onclick}>click me</button>
</div>
);
}
}
class imagelist extends react {
render() {
return (
this.props.images.map(i => <image name={i.name} src={i.src} onclick={this.props.updateimage} />)
);
}
}
const mapstatetoprops = (state) => {
return {
images: state.images,
};
};
const mapdispatchtoprops = (dispatch) => {
return {
updateimage: () => dispatch(updateimageaction()),
};
};
export default connect(mapstatetoprops, mapdispatchtoprops)(imagelist);
in this example, imagelist
is a connected component and image
is a non-connected component.
score:0
there used to be advice to the effect to try to limit the components that you connect. see for example:
https://github.com/reactjs/redux/issues/419
https://github.com/reactjs/redux/issues/419#issuecomment-178850728
anyway, that's really more useful for delegating a slice of state to a component. you can do that if it makes sense for your situation, or if you don't want to pass down a callback that calls dispatch()
you can pass the store or dispatch down the hierarchy if you want.
Source: stackoverflow.com
Related Query
- How can I dispatch from child components in React Redux?
- How to prevent Redux dispatch from re-rendering the child components
- How do I stop nested React components that dispatch Redux actions which update state from getting stuck in an infinite loop?
- How to get values from child components in React
- How to dispatch actions from Child components three level down?
- How can I import React Components as a package/module from some other(non-project) directory?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How can i dispatch an action from a helper function in react native
- How can I access child components values from a parent component when they are added dynamically?
- In how many ways we can pass props to all child components in react
- Where does the root reducer come from in this redux react example and how does dispatch knows which reducer to go?
- How to update redux state using a react variable passed up to the component from a child
- How can I collapse an accordion from a child component in react
- How can i only re-render the new child component when mapping an array from Redux state?
- How can the value go from the Child element to the sister Element in React | JSX
- how can i access the history in my react components from props?
- How to render React Child Components from a function call?
- How to get the data from Redux store using class components in React
- How can I get all sibling components to correctly re-render when dispatching a redux action from one sibling component?
- How can I import multiple functions or components from a package using react lazy
- How a child component can get several props/data from two separate parent components
- How can I pass arguments in action different 3 level react components without redux and context API?
- Redux reducer not updating prop value in React component from dispatch outside React components
- How can I require react components from a local folder without node_modules from a globally installed node app?
- How can I force React to re-render all components on a page that come from array.map?
- How to dispatch a value from Textarea to store React Redux
- How to get event from components to container in React Redux
- How can I use Redux `connect` from inside a React component?
- How can I make my React child components render even if a prop is missing
- How can I get separated states from multiple child components in React.js?
More Query from same tag
- How do you publish and subscribe to data that's not Mongo db?
- Fetching data from an api with interpolation to search weather in a certain city
- React not displaying data after successful fetch
- Using Props in stateful and Stateless component
- Get Multiple Values When A Single Dropdown Is Selected Using ReactJS
- Telegram Web Bots data validation in JavaScript
- Any global onClick function in react?
- importing googleapis in Nodejs gives error. How to properly import googleapis pakage.Iam using type:modules
- React component not taking into account CSS
- Best way to destructuring inside react components?
- DirectionsRenderer for origin and destination as props
- export 'default' (imported as 'x') was not found in '../x/x' (possible exports: x)
- Normalizing not nested tree into nested with Normalizr
- how to switch between inputs in converter app in react?
- TeamCity build fails because of TypeScript - TS2304 and TS7006
- React state not reactive when triggered from outside library
- How to count object's number in array?
- I get the correct result, but in my debugger in the console tab, I always see twice the expected result
- Material UI Card alignment listing
- React multi-step form using react-select not updating state
- Why is use effect not triggering when it's array dependency changes?
- Can you pass down state to child components with React Hooks?
- ReactJs, Typescript protected route with HOC as functional component
- BorderRadius showing different background color
- Display and Manipulate state values in a customised manner
- How To do mapping of click , text and className in Redux's presentational componant
- Adding span tag in json translation string
- Refreshing page gives Cannot GET /page_url in react-router 2
- React onSubmit function doesn't hit Express endpoint (Nodemailer)
- React JS Events Not Firing for the Last rendered element