write to local state from props - reactjs

Question

I understand that the problem is rather trivial, but I can't deal with it, I need your help.
I tried all the solutions in similar questions, but it did not work for me
The bottom line is that when I mount the component, I run fetch and I get a list of articles from my API, but this does not suit me, since I don’t save them in the local state.
Besides, my terrible knowledge of React, I have 2 more problems:
1) When I navigate through the pages, when I return to the articles page, the number of results is duplicated in an arithmetic progression, as I understand it, this is the problem that I keep articles in props, but I need to save it in a local state.
2) From this my second problem expires. I tried everything, but I could not do props.articles -> state.articles, in order to apply this.state.articles.map in the future
//actions
import {FETCH_ALL_ARTICLES} from "../constants";
export const fetchAllArticles = () => {
return (dispatch) => {
let headers = {"Content-Type": "application/json"};
return fetch("/api/articles/", {headers, })
.then(res => {
if (res.status < 500) {
return res.json().then(data => {
return {status: res.status, data};
})
} else {
console.log("Server Error!");
throw res;
}
})
.then(res => {
if (res.status === 200) {
return dispatch({type: FETCH_ALL_ARTICLES, articles: res.data});
}
})
}
};
//component
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {articles} from "../actions";
class Home extends Component {
constructor(props) {
super(props);
this.state = {
articles: []
}
console.log(this.props.articles)
};
componentDidMount() {
this.props.fetchAllArticles()
};
render() {
return (
<div>
<Link to='/notes'>Notes</Link>
<h2>All articles</h2>
<hr />
<table>
<tbody>
{this.state.articles.map((article, id) => (
<tr key={`article_${id}`}>
<td>{article.headline}</td>
<td>{article.description}</td>
<td>{article.created}</td>
<td>{article.author.username}</td>
<td>{article.image}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
}
const mapStateToProps = state => {
return {
articles: state.articles,
}
};
const mapDispatchToProps = dispatch => {
return {
fetchAllArticles: () => {
dispatch(articles.fetchAllArticles())
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
// reducer
import {FETCH_ALL_ARTICLES} from "../constants";
const initialState = [];
export default function articles(state=initialState, action) {
switch (action.type) {
case FETCH_ALL_ARTICLES:
return [...state, ...action.articles];
default:
return state;
}
}

Answer 1

Your question is unclear but I will try to explain based on the title 'write to local state from props'.
You can utilize component lifecycles as below to achieve that
componentWillReceiveProps(nextProps) {
if (nextProps.articles) {
this.setState({ articles: nextProps.articles });
}
}
Basically whenever there is an update to this component, this lifecycle method componentWillReceiveProps will get invoked before re-rendering, so we can call setState here and save it to local state.
when I return to the articles page, the number of results is duplicated in an arithmetic progression
This should not happened if you handle your reducer correctly. For example, after you fetch articles from API, clear your array then only store the value you receive from API. But then of course it's all depending on what you want to achieve

Answer 2

Every time your component mounts, you fetch all the articles.
When you fetch all the articles, you add them to your existing Redux state:
return [...state, ...action.articles];
To fix this, you can discard the old articles instead of keeping them:
return [...action.articles];
Or you can avoid fetching articles if they have already been fetched:
componentDidMount() {
if (!this.props.articles || this.props.articles.length === 0) {
this.props.fetchAllArticles()
}
};
You don't need to do anything with local state. Your Redux state is your single source of truth. Keeping another copy of the data in local state serves no purpose.

Answer 3

You can render your articles directly from this.prop.articles in render function.
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {articles} from "../actions";
class Home extends Component {
componentDidMount() {
this.props.fetchAllArticles()
};
render() {
return (
<div>
<Link to='/notes'>Notes</Link>
<h2>All articles</h2>
<hr />
<table>
<tbody>
{this.props.articles.map((article, id) => (
<tr key={`article_${id}`}>
<td>{article.headline}</td>
<td>{article.description}</td>
<td>{article.created}</td>
<td>{article.author.username}</td>
<td>{article.image}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
}
const mapStateToProps = state => {
return {
articles: state.articles,
}
};
const mapDispatchToProps = dispatch => {
return {
fetchAllArticles: () => {
dispatch(articles.fetchAllArticles())
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Answer 4

Your question is short, but as I understand you are looking to pass the data through props from parent component to child component and then you want to store them into local state.
For that, you need to add constructor into child component and assigned props to state like.
import React,{Component} from 'react';
class ChildComponent extends Component{
constructor(props){
super(props);
this.state={
name: props.name,
email: props.email
}
}
..........
// your child component logic
}
Pass the data through parent component like,
<ChildComponent name={this.state.name} email={this.state.email} />