Rodrigoplp/stream-saga
1
0
Fork 0
Code Issues Pull requests 13 Projects Releases Packages Wiki Activity Actions

Update state after redux action

Browse source
This commit is contained in:
Rodrigo Pedroso 2019-06-21 11:51:07 -04:00
commit ec69a8131e
3 changed files with 35 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/js/components/Posts.jsx
View file

@ -1,47 +1,47 @@
import React, { Component } from "react" import React, { Component } from "react"
import { connect } from "react-redux" import { connect } from "react-redux"
import { getData } from "../actions/index"
import { getHillaryData } from "../actions/index" import { getHillaryData } from "../actions/index"
import { getTrumpData } from "../actions/index" import { getTrumpData } from "../actions/index"
export class Post extends Component { export class Post extends Component {
componentDidMount() { componentWillUpdate(nextProps, nextState) {
// this.props.getData() if (nextProps.candidate !== this.props.candidate) {
if (this.props.candidate === 'Hilary Clinton') { if (nextProps.candidate === 'Hillary Clinton') {
this.props.getHillaryData() this.props.getHillaryData()
}
else if (nextProps.candidate === 'Donald Trump'){
this.props.getTrumpData()
}
} }
else { }
this.props.getTrumpData()
}
}
render() { render() {
let cand = this.props.candidate === undefined ? 'Not set' : this.props.candidate let cand = this.props.candidate === undefined ? 'Not set' : this.props.candidate
return ( return (
<div> <div>
<p>Candidate: {cand}</p> <p>@{cand}</p>
<ul className="list-group list-group-flush"> <ul className="list-group list-group-flush">
{this.props.articles.map(el => ( {this.props.articles.map(el => (
<li className="list-group-item" key={el.id_str}> <li className="list-group-item" key={el.id_str}>
<p>{el.created_at}</p> <p>{el.created_at}</p>
<p>{el.text}</p> <p>{el.text}</p>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
) )
} }
} }
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
articles: state.remoteArticles.slice(0, 10), articles: state.remoteArticles.slice(0, 10),
candidate: state.candidate candidate: state.candidate
} }
} }
export default connect( export default connect(
mapStateToProps, mapStateToProps,
{ getData, getHillaryData, getTrumpData } { getHillaryData, getTrumpData }
)(Post) )(Post)

2
src/js/constants/action-types.js
View file

@ -1,2 +1,4 @@
export const ADD_ARTICLE = "ADD_ARTICLE" export const ADD_ARTICLE = "ADD_ARTICLE"
export const SET_CANDIDATE = "SET_CANDIDATE" export const SET_CANDIDATE = "SET_CANDIDATE"
export const DATA_LOADED = "DATA_LOADED"
export const DATA_LOADED_TO_ADD = "DATA_LOADED_TO_ADD"

10
src/js/reducers/index.js
View file

@ -1,5 +1,7 @@
import { ADD_ARTICLE } from '../constants/action-types' import { ADD_ARTICLE } from '../constants/action-types'
import { SET_CANDIDATE } from '../constants/action-types' import { SET_CANDIDATE } from '../constants/action-types'
import { DATA_LOADED } from '../constants/action-types'
import { DATA_LOADED_TO_ADD } from '../constants/action-types'
const initialState = { const initialState = {
articles: [], articles: [],
@ -20,7 +22,13 @@ function rootReducer(state = initialState, action) {
}) })
} }
else if (action.type === "DATA_LOADED") { else if (action.type === DATA_LOADED) {
return Object.assign({}, state, {
remoteArticles: action.payload.message.statuses
})
}
else if (action.type === DATA_LOADED_TO_ADD) {
return Object.assign({}, state, { return Object.assign({}, state, {
remoteArticles: state.remoteArticles.concat(action.payload.message.statuses) remoteArticles: state.remoteArticles.concat(action.payload.message.statuses)
}) })