[React/Redux] A Better Way to Load Data

Stephen Grider · 41K views · 2016 · 9:30

Open on YouTube

Web developmentSoftware architecture & designtutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about component lifecycle methods and data fetching in React Router and Redux apps, as an alternative to loading data in componentWillMount.

Recommended by 1 people across 1 different months, 2016 to 2017.

What it is

A 9.5-minute 2016 tutorial by Stephen Grider on loading data in React/Redux apps based on the routes a user visits rather than in component lifecycle methods. It is the first video in a series and aims to keep components smaller and more reusable.

What people said

Recommends Revln9 · 2017-01 · Stack Overflow · on “Redirect react-router-redux push within component lifecycle”

Use the react router hooks instead it will be cleaner (smaller components) and simpler than using the component lifecycle. [LINK] in your case you need to use all 3 arguments because the first one is the next state the second is the redirection you want to make and the third is a callback to call when you are done testing values. i can give you an exemple about how to make this but i don't really know how your app is structured so instead check this link , it helped me a lot: [this video] hope this helps! ps: in some cases you need to define the onChange hook too example : pagination...

Cites EQuimper · 2016-10 · Stack Overflow · on “Action creator not called”

I think the error is coming from the way you handle the Promise [LINK] . The first time you see the mapStateToProps in the console you can see you have no data so this is PENDING, the second is when it's FULFILLED. You need to find a way to handle this. Example but not the best, I think you can just change you if statement. import React, {Component} from 'react'; import { connect } from 'react-redux'; import { fetchPosts } from '../actions/index'; import { Link } from 'react-router'; class PostsIndex extends Component { componentWillMount() { console.log("componentWillMount"); this.props.fetchPosts(); } renderPosts() { return this.props.posts.map((post) => { return ( <li className="list-grou

Cites user2602079 · 2017-03 · Stack Overflow · on “Call lifecycle methods on container component created with connect()”

I would like to call componentDidMount() on the container component that is created by this connect() ed component: import { View, Text } from 'react-native' import { connect } from 'react-redux' import { formStyles } from '../../style' import { DimenInput } from '../dimenInput/DimenInput' import { updateDimension } from '../../actions/updateDimension.action' import React from 'react' import { updateVolume } from '../../actions/updateDimension.action' import calcVol from '../../calcVol' const mapStateToProps = (state) => ({ height1: state.get('height').get('height1').toString(), height2: state.get('height').get('height2').toString() }) const updateHeight = (text, number) => (dispatch, getSta