Login.js in functional component
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { login } from '../actions/auth';
const Login = ({ login, isAuthenticated }) => {
return (
<div>
// some code here
</div>
);
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { login })(Login);
How can I use above mapStateToProps function in class component as I used above in functional component?
Login.js in class component
import React, {Component} from "react";
class Login extends Component{
constructor(props) {
super(props);
this.state = {
search:'',
}
}
render() {
return(
<div>
//some code here
</div>
)
}
}
export default Login;
In class components mapStateToProps works the same as functional components, I feel there are only differences in some syntax or calling approaches.
It does not matter if a mapStateToProps function is written using the function keyword (function mapState(state) { } ) or as an arrow function
(const mapState = (state) => { } ) - it will work the same either way.
Class component with mapStateToProps
import React, {Component} from "react";
import { connect } from 'react-redux';
import { login } from '../actions/auth';
class Login extends Component{
constructor(props) {
super(props);
this.state = {
search:'',
}
}
render() {
const { isAuthenticated } = this.props;
return(
<div>
//some code here
</div>
)
}
}
function mapStateToProps(state) {
const { isAuthenticated } = state.auth.isAuthenticated
return { isAuthenticated }
}
export default connect(mapStateToProps)(Login)
As you can see there is only 1 major difference is: In Class component we are reading the value isAuthenticated from this.props whereas in the Functional component we are getting the value as arguments.
For information read more about mapStateToProps. https://react-redux.js.org/using-react-redux/connect-mapstate
Related
I would like to use some data I received from firestore to build a quiz. Unfortunately I can console.log the array, but if I use .length it is undefined.
Is this problem caused by some lifecycle or asnynchronous issue?
Thanks in advance!
import React, { Component } from 'react';
import { connect } from 'react-redux';
class LernenContainer extends Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render() {
return (
<div className="lernenContainer">
LernenContainer
{
console.log(this.props.firestoreData),
// prints array correctly
console.log(this.props.firestoreData.length)
// is undefined
}
</div>
);
}
}
const mapStateToProps = state => {
return {
firestoreData: state.firestoreData
};
};
const mapDispatchToProps = dispatch => {
return {
// todo Achievements
};
};
export default connect(mapStateToProps, mapDispatchToProps) (LernenContainer);
console.log(this.props.firestoreData):
Try below code
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types'
class LernenContainer extends Component {
constructor(props) {
super(props);
}
static propTypes = {
firestoreData: PropTypes.object.isRequired
}
render() {
const { firestoreData } = this.props
console.log(firestoreData);
console.log(firestoreData.length);
return (
<div className="lernenContainer">
</div>
);
}
}
const mapStateToProps = (state) => ({
firestoreData: state.firestoreData
})
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps,mapDispatchToProps)(LernenContainer);
I am using react native and react navigation for routing.
How to update state from another component/page?
HomeScreen
export class HomeScreen extends Component {
constructor(){
this.state = {
test: ''
}
}
updateState = ()=>{
this.setState({test:'new value'});
}
}
SideMenuScreen
import { HomeScreen } from "./home";
export class SideMenuScreen extends Component {
updateHomeState = ()=>{
let oHome = new HomeScreen();
oHome.updateState();
}
}
My App.js and routing and sidemenu config as below :
import { createAppContainer, createDrawerNavigator } from "react-navigation";
import { SideMenuScreen } from "./screens/Sidemenu";
import { HomeScreen } from "./screens/Home";
export default class App extends Component {
render() {
return(
<AppContainer></AppContainer>
);
}
}
const AppNavigator = createDrawerNavigator(
{Home: HomeScreen,
other: otherpage},
{
contentComponent: SideMenuScreen
}
);
const AppContainer = createAppContainer(AppNavigator);
updateState executing but not updating state.
If you have to update from the child component
You will have to pass down the Handlers from the component which holds the state to update the values, child component can make use of these handlers to update the state
If you have to update from some other location
You will have to do a level up the State and follow the same has above.
LevelUpComponent
export class App extends Component {
constructor(){
this.state = {
test: ''
}
}
updateState = (values)=>{
this.setState(values);
}
render(){
return <div>
<HomeScreen></HomeScreen>
<SideMenuScreen updateState={this.updateState}></SideMenuScreen>
</div>
}
}
Since you're not haveing Parent-Child relationship between your components ... thi s could be accomplished through Redux Action
HomeScreen;
export class HomeScreen extends Component {
constructor() {
this.state = {
test: ""
};
}
componentWillReceiveProps(nextProps) {
const { test: nextTest } = nextProps;
const { test } = this.props;
if (nextTest !== test) {
this.setState({ test: nextTest });
}
}
}
const mapStateToProps = ({ yourReducerName: test }) => ({ test });
export connect(mapStateToProps)(HomeScreen);
import { HomeScreen } from "./home";
import { connect } from "tls";
class SideMenuScreen extends Component {
updateHomeState = () => {
const { updateHomeStateAction } = this.props;
updateHomeStateAction({ test: 'New Value' });
};
}
export default connect(null, { updateHomeStateAction })(SideMenuScreen);
when you navigate to next screen pass this function in params,
this.props.navigate("SideMenuScreen",{update:this.updateState});
And in your side menu screen,
call it using props,
this.props.navigation.state.params.update();//you can pass params also if needed
You can do this by using ref.
HomeScreen
export class HomeScreen extends Component {
constructor(){
this.state = {
test: ''
}
}
updateState = ()=>{
this.setState({test:'new value'});
}
}
SideMenuScreen
import { HomeScreen } from "./home";
export class SideMenuScreen extends Component {
updateHomeState = ()=>{
this.homeScreen.updateState();
}
render(){
return(
<HomeScreen ref={(ele) => this.homeScreen = ele}/>
);
}
}
I'm building a Todo app using react+redux. When I add new todo in my list, state of store and state of TodoList component are updated successfully but My todoList code not working properly. React component is not rendering list.
Structure of state is below.
State = [
{
id,
text,
completed
},...
]
My code is below.
Todo.js
import React, { Component } from 'react';
import Form from './Form';
import TodoList from './TodoList';
import Filter from './Filter';
class ToDo extends Component {
render() {
return (
<div>
<h2>Todo App</h2>
<Form />
<TodoList />
<Filter />
</div>
);
}
}
export default ToDo;
TodoList.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { toggleToDo } from '../actions';
class TodoList extends Component {
constructor (props){
super(props);
this.state = {
list: []
};
}
render() {
console.log(this);
const todolist = this.state.list;
return (
<ul>
{
todolist.map(function(listValue) {
return <li>{listValue.text}</li>;
})
}
</ul>
);
}
}
const mapStateToProps = (state) => {
console.log('TodoList state',state);
return {
todos: state
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({toggleToDo},dispatch);
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
You are mapping your state to props with mapStateToProps so you should get this state value from your props.
const { todos } = this.props; and iterate on todos instead of todolist.
I have this error and can't really understand what could go wrong when {connect} imported and const mapStateToProps declared:
./src/Movies.js Syntax error: C:/projects/library/src/Movies.js:
Unexpected token (6:8)
6 | const mapStateToProps = (state) => ({
import React, { Component } from "react";
import { connect } from "react-redux";
import MovieItem from "./MovieItem";
class Movies extends Component {
const mapStateToProps = (state) => ({
movies: state.movies;
});
render() {
let movieItems = this.props.movies.map(movie => {
return <MovieItem movie={movie} />;
});
return <div className="Movies">{movieItems}</div>;
}
}
export default connect(mapStateToProps, null)(Movies);
You need to define mapStateToProps function outside of your React component
import React, { Component } from "react";
import { connect } from "react-redux";
import MovieItem from "./MovieItem";
class Movies extends Component {
render() {
let movieItems = this.props.movies.map(movie => {
return <MovieItem movie={movie} />;
});
return <div className="Movies">{movieItems}</div>;
}
}
const mapStateToProps = (state) => ({
movies: state.movies;
});
export default connect(mapStateToProps, null)(Movies);
A class member cannot be declared as a const, var or let. Also since you need to use it outside of the React component only, you should define it separately
I may be missing something, but I can't find any example where connect() wraps a component defined as a class (extending React.Component), it always wraps components defined as a simple function.
A call like this:
connect(mapStateToProps, mapDispatchToProps)(HomeView)
where HomeView extends React.Component, I get a Cannot call a class as a function error.
Any help would be much appreciated.
Edit (sorry for the ammount of code, I don't know what might be relevant):
routes/Home/components/HomeView.js
import React from 'react'
import './HomeView.scss'
class HomeView extends React.Component {
render() {
return (
<div>
<h4>Home</h4>
<div id="g-signin2" data-onsuccess={this.props.signin} />
</div>
)
}
componentDidMount() {
gapi.signin2.render('g-signin2', {
'scope': 'profile email',
'width': 200,
'height': 50,
'longtitle': true,
'theme': 'dark'
});
}
}
HomeView.propTypes = {
signin : React.PropTypes.func.isRequired
}
export default HomeView
routes/Home/modules/home.js
export const HOME_SIGNIN = 'HOME_SIGNIN'
export function signin(newUser) {
return {
type: HOME_SIGNIN,
payload: newUser
}
}
export const actions = {
signin
}
const ACTION_HANDLERS = {
[HOME_SIGNIN] : (state, action) => {
debugger;
return Object.assign({}, state, {user: action.payload});
}
}
const initialState = {
user: null
}
export default function homeReducer(state = initialState, action) {
const handler = ACTION_HANDLERS[action.type];
return handler ? handler(state, action) : state;
}
routes/Home/containers/HomeContainer.js
import {connect} from 'react-redux'
import {signin} from '../modules/home'
import HomeView from '../components/HomeView'
const mapDispatchToProps = {
signin
}
const mapStateToProps = (state) => ({
user: state.user
})
export default connect(mapStateToProps, mapDispatchToProps)(HomeView)
routes/Home/index.js
import HomeContainer from './containers/HomeContainer'
export default (store) => {
component : HomeContainer(store)
}
routes/index.js
import CoreLayout from '../layouts/CoreLayout'
import HomeRoute from './Home'
export const createRoutes = (store) => ({
path : '/',
component : CoreLayout,
indexRoute : HomeRoute(store),
childRoutes : []
})
export default createRoutes
You can wrap a React component, whether it's a class or a functional component, with react-redux connect.
class MyDiv extends React.Component {
render() {
return <div>hi</div>
}
}
export default connect(({ stateStuff }) => ({ stateStuff }))(MyDiv);
you actually are correctly wrapping your component class in connect(). Your problem is elsewhere, in routes/Home/index.js:
import HomeContainer from './containers/HomeContainer'
export default (store) => {
component : HomeContainer(store)
}
the default export of HomeContainer is the higher-order class returned by connect. You're then trying to use HomeContainer as a function here, just like your console error says:
HomeContainer(store)
.