Как установить загрузчик для действия promise.all в React Redux? - PullRequest
Новая
       28

Как установить загрузчик для действия promise.all в React Redux?

0 голосов
/ 24 октября 2019

Поэтому, когда я проверяю Redux dev-tools, я вижу, что я получил свои данные, и они являются частью состояния, но когда я пытаюсь использовать условный рендеринг, он не рендерит страницу и выдает ошибку TypeError: Cannot read property«Глобальная цитата» из неопределенного!

Если я просто использую this.props.data.TSLA, он работает нормально, и страница отображается ...

Когда я использую this.props.data.TSLA ["Global Quote"] [Страница "01. symbol"] не будет отображаться! (ключи являются строками в JSON, поэтому мне нужно использовать квадратные скобки).

Я также использую Redux-Thunk! 

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { START_FETCH_DATA } from './redux/dataReducer';

class Fetcher extends Component {

componentDidMount() {
    this.props.START_FETCH_DATA()
}

render() {

const { data, dataLoading } = this.props;

    return (
    <li className="tesla-container">
    { this.props.dataLoading ? 
    (<div className="ticker"> Loading! </div>) 
    : 
    (<div className="ticker">{ 
    this.props.data.TSLA["Global Quote"]["01. symbol"] }</div>) }
    </li>
    )
}

const mapStateToProps = (state) => {
    return {
        data: state.data,
        dataLoading: state.dataLoading
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        START_FETCH_DATA: bindActionCreators(START_FETCH_DATA, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Fetcher)

и вот действия + редуктор +

export const dataReducer = (state = {dataLoading: true}, action) => {
switch(action.type) {
    case "START_FETCH_DATA":
        return {...state, dataLoading: true}
    case "FINISH_FETCH_DATA":
        return {...state, dataLoading: false, data: action.payload}
    default:
        return state;
}};

export const START_FETCH_DATA = () => {
return (dispatch) => {
    Promise.all(
        [
        fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey=LOL`).then(data => data.json()),
        fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=AMZN&apikey=LOL`).then(data => data.json())
        ]
    )
    .then(([TSLA, AMZN]) => {
        dispatch({ type: "FINISH_FETCH_DATA", payload: {TSLA, AMZN} })
    })
}};

СКРИНШОТ DEVTOOLS https://imgur.com/a/2Tcrdpe

Ответы [ 2 ]

0 голосов
/ 26 октября 2019

Я исправил свою проблему.

Исправлен код ниже: 

`const mapStateToProps = (state) => {
    return {
        dataLoading: state.dataReducer.dataLoading,
        data: state.dataReducer.data
    }
}`

вместо 

`const mapStateToProps = (state) => {
    return {
        dataLoading: state.dataLoading,
        data: state.data
    }
}`
0 голосов
/ 24 октября 2019

Для начала вы должны использовать данные, предоставленные redux в render(): 

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { START_FETCH_DATA, dataReducer } from './redux/dataReducer';

class Fetcher extends Component {

componentDidMount() {
    this.props.START_FETCH_DATA()
}

render() {
    return (
    <li className="tesla-container">
    { this.props.dataLoading ? 
    (<div className="ticker"> Loading! </div>) 
    : 
    (<div className="ticker">{ 
    this.props.data.TSLA["Global Quote"]["01. symbol"] }</div>) }
    </li>
    )
}

const mapStateToProps = (state) => {
    return {
        data: state.data,
        dataLoading: state.dataLoading
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        START_FETCH_DATA: bindActionCreators(START_FETCH_DATA, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Fetcher)
...