Why is store undefined?

U

UncleDenn2018-12-03 14:48:16

JavaScript

UncleDenn, 2018-12-03 14:48:16

Hello everyone
, I can’t deal with the store
in the state, everything is dispatched, but I can’t get the state in the component.
As I understand it, the whole point is that the dispatch occurs after the component requests the deletion, and it is still empty
Tell me how to solve the pzh
Component

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

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton Spirin, 2018-12-03
@rockon404

First of all, you should understand the basics of JavaScript, and only when you have confident knowledge take on React.
1. You pass the data property to the component, but do not use it anywhere.
2. Declare the state in the reducer as an array, then replace it with an object.
3. At least they understood what they meant in this line: 4. There is also an error in this line: probably the correct option is this:
const { data } = this.props;