what i wanna do is to make a component and connect it to redux(to bring some of redux store props to component), then extend this component and make those redux props available to child component as well(cause they have exactly same props). but i faced a problem:
This is parent class
import * as React from 'react'
import { connect } from 'react-redux'
import { View } from 'react-native'
class UnConnectedManageProductBaseScene extends React.Component {
public render(){
return (
<View/>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export const ManageProductBaseScene = connect(
mapStateToProps,
mapDispatchToProps
)(UnConnectedManageProductBaseScene)
and this is child class
import { ManageProductBaseScene} from '../ManageProductBaseScene'
export class OwnerManageAuctionScene extends ManageProductBaseScene {
constructor(props) {
super()
}
}
when i try to extend OwnerManageAuctionScene from redux connected component (ManageProductBaseScene) i get error: Super expression must either be null or a function
Pass the props as a parameter in super() like this
import { ManageProductBaseScene} from '../ManageProductBaseScene'
export class OwnerManageAuctionScene extends ManageProductBaseScene {
constructor(props) {
super(props);
}
}
Related
I've got a parent component Course that is able to get state from redux and I'm able to log that out successfully:
import React, { Component } from "react";
import { connect } from "react-redux";
import SchoolWrapper from "../SchoolWrapper";
export class Course extends Component {
constructor(props) {
super(props);
console.log("Props in course", props);
}
render() {
return (
<>
<SchoolWrapper>Wrapped component</SchoolWrapper>
</>
);
}
}
const mapStateToProps = (state) => ({
user: state.user,
});
export default connect(mapStateToProps)(Course);
Nested in the Course component is another component SchoolWrapper that is able to get props from redux state:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Nav } from "./Student/Nav";
export class SchoolWrapper extends Component {
constructor(props) {
super(props);
console.log("SchoolWrapper props", props);
}
render() {
return (
<>
<Nav />
</>
);
}
}
const mapStateToProps = (state) => ({
user: state.user,
});
export default connect(mapStateToProps)(SchoolWrapper);
However, the Nav component or any other component nested at this level is not able to access state from redux.
import React, { Component } from "react";
import { connect } from "react-redux";
export class Nav extends Component {
constructor(props) {
super(props);
console.log("Nav props: ", props);
}
render() {
return (
<div>
nav goes here...
</div>
);
}
}
const mapStateToProps = (state) => ({
user: state.user,
});
export default connect(mapStateToProps)(Nav);
Where am I going wrong?
I think you're importing Nav wrong, here you're using a "default" export:
export default connect(mapStateToProps)(Nav);
But you try to use a "named" import:
import { Nav } from "./Student/Nav";
Nav should be imported as a "default":
import Nav from "./Student/Nav"
I want to call functions from another class in react.Js and I did it successfully. My problem is that I get Error: You must pass a component to the function returned by connect. Instead received {"refs":{},"updater":{}} if I use react-redux. Here is a basic example of algortihm
import { Component } from "react";
import { GetCityListFromActiveAddressSource } from '../Services/AddressService'
import { connect } from 'react-redux';
class FirstClass extends Component{
constructor(props){
super(props);
}
TestFunction(){
alert("test");
}
render(){
return null
}
}
const mapStateToProps = ({ Modules }) => {
const { GetDynamicMenuList } = Modules;
return { GetDynamicMenuList }
}
const Address = new AddressService();
export default connect(mapStateToProps,{GetCityListFromActiveAddressSource})(Address);
//export default Address;
And My Second class...
import React, { Component } from 'react';
import FirstClass from '../../../ServiceClient/FirstClass';
class SeconClass extends Component {
constructor(props) {
super(props);
}
componentDidMount(){
Address.TestFunction();
}
}
If I don't use connect and react-redux then I can call my function. But I have to use react-redux.
I solved my problem, My problem was that I used export default with const value but react-redux(connect) needs a component or function But I unfortunatelly used const value in my example. That's why I got error. Then I exported my component in connect and I used another export for my const. It works well enough for me.
import React, { Component } from "react";
import { GetCityListFromActiveAddressSource } from '../Services/AddressService'
import { connect } from 'react-redux';
class AddressService extends Component{
constructor(props){
super(props);
}
TestFunction(){
alert("test");
}
render(){
return null
}
}
const mapStateToProps = ({ Modules }) => {
const { GetDynamicMenuList } = Modules;
return { GetDynamicMenuList }
}
export default connect(mapStateToProps,{GetCityListFromActiveAddressSource})
(AddressService);
export const Address = new AddressService();
And I call my function like
import {Address} from '../../../ServiceClient/Address';
Using typescript for react as the language i have declared a class with constraints . I need to apply the connect method to it
import * as React from 'react';
import { connect } from 'react-redux';
import { initAskadeFiles } from '../Entities/Askade/Askade.Actions';
import { Dispatch } from 'redux';
interface IProp<T> {
PropOne: T
}
interface IState<T> {
StateOne: T
}
class BaseEdit<T> extends React.Component<IProp<T>, IState<T>> {
}
export function mapDispatchToProps(dispatch: Dispatch, ownProps: any) {
return {
InsertItem: () => dispatch(initAskadeFiles())
}
}
export default connect(null, mapDispatchToProps)(BaseEdit);
And in the calling component below is the syntax
import * as React from 'react';
import BaseEditSample from './BaseEditSample';
import { City } from '../Components/GridFunctionality/City';
export class ComplexEditSample extends React.Component {
public render(): any {
<BaseEditSample<City> />
}
}
When i use the syntax with City being passed to it i get an error
what am i missing in this i need redux to be connected to this component along with the contraints? Thanks
[ts] Expected 0 type arguments, but got 1.
First, you can pass your actions directly to the connect without mapDispatchToProps like this:
export default connect(mapStateToProps, { state, actions })(Component);`
And in your component use the imported actions and states:
type ComponentProps = {state, actions};
export default class Component extends React.Component<ComponentProps> {
render() {
const {
data,
actions,
} = this.props
return (...)
}
I'm trying to build a fetch method that can be shared to a bunch of Reader components through a higher order component. I believe I've built the HOC right, but I'm not 100% sure.
import React, { Component } from 'react';
import base from "./firebase";
export default (ChildComponent) => {
class GetPage extends Component<{},any> {
constructor(props: any) {
super(props);
this.state = {
text: "Hii"
};
}
public getPage(page: string) {
base
.fetch(page, { context: this, })
.then(data => this.setState({ text: data }));
console.log(this.state.text)
}
public render() {
return <ChildComponent getPage={this.getPage} text={...this.state.text} {...this.props}/>;
}
}
return GetPage;
};
You can see that I'm importing the HOC on the second line , but despite this, the 'Reader' component is throwing an error that 'getPage' is no where to be found.
import * as React from "react";
import GetPage from "./fetch";
class Reader extends React.Component<{},any>{
public componentWillMount() {
this.getPage('1A1');
}
public render() {
return <div{...getPage('1A1')}>{...this.state.text}</div>;
}
}
export default (GetPage(Reader));
Inside your Reader component instead of accessing this.getpage try with this.props.getpage
and I don't understand why you are doing with following:
<div{...getPage('1A1')}>
I have a React Component Post:
export class Post extends React.Component {
constructor(props) {
this.state = this.props;
}
...
}
, which I compose with
import { composeWithTracker } from 'react-komposer';
import { composeWithTracker } from 'react-komposer';
import Post from '../components/post.jsx';
function composer(props, onData) {
const subscription = Meteor.subscribe('post', props.postId);
if (subscription.ready()) {
const data = {
ready: true,
posts: Posts.findOne(props.postId).fetch()
}
onData(null, data);
} else {
onData(null, {ready: false});
}
}
export default composeWithTracker(composer)(Post);
. As given in the Post Component I want to put some properties in the state of the component, but the constructor will be executed before I get the data from the composer!
How do I wait until the data is send and then put my props into the state?
Isn't this what the React Kompose should do? BTW I am using Version 1.~ to get composeWithTracker.
You could use componentWillReceiveProps to get new properties and set as component state. This function will run whenever there are new properties passed to component:
export class Post extends React.Component {
// ...
componentWillReceiveProps(nextProps) {
this.setState({
...nextProps,
});
}
// ...
}