Redux State null в методе рендеринга, даже после того, как состояние должного обновлено - PullRequest
1 голос
/ 27 июня 2019

Я нахожусь в фазе обучения реакции и создания небольшого приложения, которое выбирает список пожеланий пользователя из таблицы Firebase и обновленного хранилища редуктов, и я пытаюсь получить доступ к этому хранилищу редуксов в методе рендеринга, но когда я console.log this.props .wishlist в методе рендеринга показывает ноль. Состояние Redux обновлено правильно. Проверено с помощью Redx Dev Tool. скриншот состояния редукции

Создатель действий, который получает данные списка желаний из API Firebase

export const fetchWishlist = (email)=> {
    return dispatch => {
        dispatch(fetchWishlistStart());
        let rawMovieId=[];
        let uniqueMovieIdList = [];
        const queryParams ='?orderBy="email"&equalTo="'+email+'"';
        axios.get('https://movie-project-6fc34.firebaseio.com/wishlist.json'+queryParams)
        .then (response=>{
            for(let key in response.data){
                rawMovieId.push(response.data[key].movieId)
            }
            uniqueMovieIdList =  [ ...new Set(rawMovieId) ];
            dispatch(fetchMovieDetailsForWishlist(uniqueMovieIdList))   
        })
        .catch(error=> {
            console.log(error);
        }) 
    }
}

export const setMovieDetailsForWishlist = (movieDetailsList)=> {
    return {
        type:actionType.SET_MOVIEDETAILS_WISHLIST,
        movieDetailsList:movieDetailsList
    }
}

export const fetchMovieDetailsForWishlist = (movieList) => {
    return dispatch => {
        dispatch(fetchWishlistSuccess());
        let updatedMovieList = []       
        movieList.map((currItem)=>{
            let final_api_url = api_url+movieDetails_api_end_point+currItem+api_key+'&language='+language
            axios.get(final_api_url)
            .then(response=>{
                updatedMovieList.push({
                    title:response.data.title,
                    movieId:response.data.id,
                    poster:response.data.poster_path
                })
            })
            .catch(error=>{
                console.log(JSON.stringify(error));
            })
        })
        dispatch(setMovieDetailsForWishlist(updatedMovieList));         
    }
}

WhislistReducer -

import * as actionType from '../actions/actionType.js'

const intialState =  {
    wishList:null,
    showLoader:false
}


const wishListReducer = (state=intialState, action) => {

        switch (action.type) {
            case actionType.FETCH_WISHLIST_START:
                return {
                    ...state,
                    showLoader:true
                }
            case actionType.FETCH_WISHLIST_SUCCESS:
                return {
                    ...state,
                    showLoader:false
                }
            case actionType.SET_MOVIEDETAILS_WISHLIST:
                return {
                    ...state,
                    showLoader:false,
                    wishList:action.movieDetailsList
                }                       
            default:
            return state

    }
} 

export default wishListReducer;

компонент пожеланий

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import * as action from '../store/actions/index'

export class Wishlist extends Component {


    componentDidMount() {           
        this.props.fetchWishlist(window.localStorage.getItem('email'));


    render() {
        let wishListPageContent = '<div> Loading........</div>'
        let userWishlistDetails = this.props.wishlist
        console.log(userWishlistDetails);
        if (!this.props.showLoader) {
            wishListPageContent = (
            <div> wishlist component</div>

            )
        }           
        return (
            <div>
                {wishListPageContent}
            </div>
        );
    }
}

const mapStateToProps = state => {      
    return {
        userEmail:state.authState.userEmail,
        wishlist:state.wishlistState.wishList,
        isAuthSuccess:state.authState.isAuthSuccess,
        showLoader:state.wishlistState.showLoader 
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchWishlist:(email)=>dispatch(action.fetchWishlist(email)),
        fetchMovieDetailsForWishlist:(movieList)=>dispatch(action.fetchMovieDetailsForWishlist(movieList))
    }
}

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Wishlist));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...