Set state of react component by using redux store

Question

How I can assign some values of redux store to my component local state?

I should use redux actions to get data from API in my componentDidMount() method. Am I right? after getting data by redux I want to set my component's state using the data from redux store.I got an error this.props.article is undefined., but redux devtools shows that article object exists.

Where I supposed to call this.setState() method ??? I tried to call it in componentWillRecieveProps() or componentDidUpdate() , but unsuccessfuly. Please any help.Thank you in advance.

import React, { Component, Fragment } from 'react';
import { Typography,Spin } from 'antd';
import {connect} from 'react-redux';
import {getArticleDetails} from '../store/actions/articles';



class ArticleEdit extends Component {
    articleID = this.props.match.params.articleID; 
    state={

        str:'initial'
    }
    onChange = (str) => {
        console.log('Content change:', str);
        this.setState({ str1:str });

      };
    componentDidMount(){
        this.props.getArticleDetails(this.articleID);// GET data from api
        this.setState({str:this.props.article.title});// returns undefined

    }

    render() {
        return (
            <Fragment>
                {this.props.article===undefined?(<Spin/>):
                    (
                    <div>
                        <div style={{marginRight:'500px'}}>
                          <Paragraph editable={{ onChange: this.onChange}}>                          
                               {this.state.str}
                          </Paragraph>
                        </div>
                    </div>
                    )}    
            </Fragment>
        )
    }
}

const mapStateToProps = state =>({
    article: state.articleReducer.articles[0],    
})

export default connect(mapStateToProps,{getArticleDetails})(ArticleEdit);

Technically, you should not set the data coming from your API as local state, if you've used action creators/thunks to fetch it, when using Redux. You should just use it as props. — Henrik Andersson
– Henrik Andersson, Commented Mar 19, 2019 at 15:19
Yes, I understand what you mean. But I have an onChange method which I want to use for edit the Title of my article. So thats why I thought I should use state. How I can handle onChange method without state??? — Ginger Bread
– Ginger Bread, Commented Mar 19, 2019 at 17:04

Cameron · Accepted Answer · 2019-03-19 15:27:08Z

5

As Henrik said, you want to use this.props instead of this.state. You already retrieve an article using mapStateToProps, which is good. If you want to pass the article title to your component, you can add some code in your render() method, like so:

render() {
    const { article } = this.props
    const { title } = article
    return (
            ...
                      <Paragraph editable={{ onChange: this.onChange}}>                          
                           {title}
                      </Paragraph>
            ...

answered Mar 19, 2019 at 15:27

Cameron

663 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ginger Bread Over a year ago

Ok, thanks for answer,but then how I can work with my onChange method ???

Cameron Over a year ago

@PrunusArmeniaca if you're using Redux to manage your state, you'll need to set up an action and reducer to change the redux store. Your title should not be changed in the React Component's state only. Does that answer your question?

Collectives™ on Stack Overflow

Set state of react component by using redux store

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related