@UncleDenn

Почему store undefined?

Всем привет
не могу никак разобраться со store
в стейт все диспатчит, но получить стейт в компоненте я не могу
Как я понял все дело в том что диспатч происходит после того как компонент запрашивает сдейт, а он еще пустой
Подскажите как решить пж

Компонент

import React, { Component } from 'react';
//import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { apiData } from '../actions'
import { bindActionCreators } from 'redux';
import Head from './Head'



class Post extends Component {
    constructor(props) { 
        super(props)
        
    }
    componentWillMount() {
        let type = this.props.match.params.posts;

        this.props.apiData(type)

        //console.log(this.props.apiData(type))
    }
    componentDidMount() {



        console.log(this.props)
    }
    render() {
        let posts = this.props

        if (posts && posts == 'undefained') {
            return (
                <div className="head">
                    <div>
                        <Head />
                    </div>
                    { }
                </div>
            )
        } else {
            return (
                <div className="head">
                     <div>
                        <Head />
                    </div>
                    <p>Loading...</p>
                </div>
            )
            
        }

    }
}



const mapDispatchToProps = (dispatch) => {
        return bindActionCreators({apiData}, dispatch);
} 

const mapStateToProps = (store) => {
    return {
        data: store.data
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(Post)

action

import axios from 'axios'
import item from '../reducer';

const someData = (data) => {
    return {
        type: "DATA_FROM_API", 
        data: data
    }
}

export const apiData = (typePage) => {
    return (dispath) => {
        axios.get('https://jsonplaceholder.typicode.com/' + typePage)
            .then(res =>  dispath(someData(res.data)))
            .catch(err => {
                console.log(err)
        })
    }
}


reducer
const item = (state = [], action) => {
    switch (action.type) {
        case "DATA_FROM_API":
        return {
            ...state,
            data: action.data
        }
        // case "FETCH_API_ERROR":
        //     return {
        //         ...state,
        //         error: action.err
        //     }
        default:
            return state
    }
}

export default item
  • Вопрос задан
  • 369 просмотров
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вам прежде всего стоит с основами JavaScript разобраться, и только когда будут уверенные знания браться за React.

1. Вы передаете в компонент свойство data, но нигде не используете.
2. Объявляете состояние в редьюсере как массив, затем подменяете на объект.
3. Сами хоть поняли что имели ввиду в этой строчке:
if (posts && posts == 'undefained') {
4. В этой строчке так же ошибка:
let posts = this.props
вероятно правильный вариант такой:
const { data } = this.props;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы