redux的state更新，但是没有渲染？？急急急急

Question

我在following组件中 dispatch addfollower方法
这个方法同时更新follower发布的posts

export function addFollower(currFollower){
    let curFriendsPosts = [];
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response=>response.json())
        .then(data => {
            let allPosts = data;
            console.log(allPosts)
            allPosts.map((post) => {
                for(let i in currFollower){
                    if(currFollower[i].id == post.userId){
                        curFriendsPosts.push(post);
                        
                    }
                }
                
            })
        })
        .catch(e=>console.log('Error',e))
        return {
            type:'IS_ADD_SUCCESS',
            currFollower,
            curFriendsPosts
        }
}


但是我在posts组件中，完全不渲染。state也是对的
console.log(state.articles)也是对的。


const mapStateToProps = (state) => {
    console.log(state.articles)
    return{
        Articles:state.articles == undefined?[]:state.articles,
    }
} ;  

export default connect(mapStateToProps, 
null)(ArticlesView);`




reducer是这样写的！！！！

export const Reducer =(state={
    errRegInfo:'',
    errLogInfo:'',
    errUpdateInfo:'',
    errAddInfo:'',
    success:'',
    location:'',
    user:{},
    articles:new Array(),
    friends:[]
},action)=>{
    switch (action.type){
        case 'TO_OUT':
            return {
                ...state,
                location:"LANDING_PAGE",
                errRegInfo:'',
                errLogInfo:'',
                errUpdateInfo:'',
                errAddInfo:'',
                success:'',
                user:{},
                articles:[],
                friends:[]}
        case 'TO_MAIN_PAGE':
            return {
                ...state,
                location:"MAIN_PAGE",
                articles:[],
            }
        case 'TO_PROFILE_PAGE':
            return {
                ...state,
                location:"PROFILE_PAGE",
                errUpdateInfo:''}
        case 'IS_REG_ERROR':
            return {
                ...state,
                errRegInfo: action.errRegInfo}
        case 'IS_LOG_ERROR':
            return {
                ...state,
                errLogInfo:action.errLogInfo
            }
        case 'IS_UPDATE_ERROR':
            return {
                ...state,
                errUpdateInfo:action.errUpdateInfo
            }
        case 'IS_ADD_ERROR':
            return {
                ...state,
                errAddInfo:action.errAddInfo
            }
        case 'IS_ADD_SUCCESS':
            return{
                ... state,
                friends:action.currFollower,
                articles:action.curFriendsPosts,
                errAddInfo:'',
            }
        case 'UPDATE_HEADLINE':
            return {
                ...state,
                    user:{
                        ...state.user,
                        headline:action.newHeadline
                    }
                }
        case 'REGISTER':
            return {
                ...state,
                user: action.user}
        case 'LOG_IN':
            return {
                ...state,
                user: action.user}
        case 'ADD_ARTICLE':
            return {
                ...state,
                articles: [
                    {
                        userName:"bebb",
                        body: action.body,
                        title: action.title
                        // timestamp:action.time,
                    },
                    ...state.articles
                ]
            }
        case 'FETCH_ARTICLES':
            return {
                ...state,
                
            }
        default:
            return state
    }
}
export default Reducer

Answer 1

我看到你是独立于异步请求dispatch的action，但实际上感觉应该在异步请求成功内，再dispatch

export function addFollower(currFollower){
    let curFriendsPosts = [];
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response=>response.json())
        .then(data => {
            let allPosts = data;
            console.log(allPosts)
            allPosts.map((post) => {
                for(let i in currFollower){
                    if(currFollower[i].id == post.userId){
                        curFriendsPosts.push(post);
                        
                    }
                }
                
            })
            return {
                type:'IS_ADD_SUCCESS',
                currFollower,
                curFriendsPosts
            }
        })
        .catch(e=>console.log('Error',e))
        
}

Answer 2

异步的action和同步的写法不太一样，要等你异步方法返回之后再进到reducer，需要使用一些中间件，比如redux-thunk，redux-promise这些，可以看下阮老师这篇文章