Zalaboza Zalaboza - 1 year ago 71
React JSX Question

Reactjs create a provider component that pass Redux to its children

i was wondering if its possible to create a parent wrapper for children that would automaticly pass a part of redux store to its children.


<ReducProvider src="user">

<ul> {><li>{}</li>)} </ul>


here i want this ul to be rendered with = the data that ReduxProvider passed it to.

i know i can simply get the part i need using connect like so

connect( (state,prop)=>({data:state[prop.src]}) )(ReduxProvider)

but sometimes i dont want the parent to listen to store changes, neither do i want the child to know where this data is coming from, so i was planning to create a Provider for every Reducer i have. this way when ever the store mutates, these providers are the only one who gona get updated.

Answer Source

Although not an answer to your question, this might solve your issue.

You can create meaningless proxy components. These components render the actual components and pass the right variables as props. I recall having read that you can generate such components automatically.

Example of such a component in ES6:

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

class AuthenticatedUser extends React.Component {

    render() {
        return <User user={this.props.user} />

export default connect(
    (state) => ({ user: state.Authentication.user }),
    (dispatch) => {}

! code is untested
So this code would inject the authenticated user from the state into the User component. Keeping the User component clean, i.e. you can render any user you like from any source. While you also created the option to render a connected version of the user which is automatically linked to the store.

answer to actual question:
I would recommend against this since the context is a bad practice through and through. But you could store your variables in the context. Children can then access these variables when requested using contextTypes property.