即使正确更新了Redux状态,渲染方法中的Redux State为null

时间:2019-06-27 13:03:14

标签: reactjs react-redux

我正处于反应的学习阶段,并创建一个小型应用程序,该应用程序从firebase表和更新的redux存储中获取用户愿望清单,并且我尝试通过render方法访问该redux存储,但是当我console.log this.props .wishlist 在呈现方法中显示为null。 Redux状态已正确更新。经过redx dev工具检查。 redux state screenshot

从Firebase API获取愿望清单数据的动作创建者

'M1 - 2019-06-27 12:08:30 - 'start''
'M1 - 2019-06-27 14:30:05 - 'stop''
'M1 - 2019-06-27 16:00:00 - 'start''
'M1 - 2019-06-27 16:30:00 - 'stop''
'M2 - 2019-06-27 16:00:00 - 'start''
'M2 - 2019-06-27 16:30:00 - 'stop''

WhislistReducer-

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));         
    }
}

愿望清单组件

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;

0 个答案:

没有答案