componentDidUpdate不会触发

Question

所以我一直在努力弄清楚react-redux生态系统有一段时间了。我几乎在那里，但仍然有一些不断给予我的问题，这就是componentDidUpdate方法。当我分派一个异步操作时，商店被正确调用并且组件的状态会更新。

但由于某些原因，componentDidUpdate方法不会触发，没有重新渲染，我无法访问更新的道具。我可以看到它在devtools中的变化，如果我console.log（this.props.blogStore）。起初，它显示为一个空对象，但当点击它时打开并显示更新的状态。

我试过尽可能多的生命周期方法，但似乎没有任何工作，包括componentWillReceiveProps。

任何想法我做错了什么？

下面是代码：

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 

import App from './App'; 
import Datastore from 'Datastore'; 

const store = Datastore() 

store.subscribe(() => console.log("state changed", store.getState())) 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('app') 
); 

Datastore.js

import { combineReducers, createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk' 

import Mainmenu from 'reducers/Mainmenu'; 
import Blogstore from 'reducers/Blogstore'; 

const reducer = combineReducers({ 
    Mainmenu, 
    Blogstore, 
}) 

export default function Datastore() { 
    const store = createStore(
     reducer, 
     applyMiddleware(thunk) 
    ) 

    return store 
} 

减速器

import Article from 'lib/Article'; 
import { ARTICLE_LOAD, ARTICLE_UPDATE, SAVE_ARTICLE_LIST } from 'actionTypes'; 

const initialBlogState = { 
} 

const Blogstore = (state=initialBlogState, action) => { 
    switch(action.type) { 
     case SAVE_ARTICLE_LIST: 
      state.init = true 
      state.articles = action.payload 
      return state 
     case ARTICLE_LOAD: 
      return state 
     case ARTICLE_UPDATE: 
      return state 
    } 
    return state 
} 

export default Blogstore; 

博客，actions.js

import { ARTICLE_LOAD, ARTICLE_UPDATE, SAVE_ARTICLE_LIST } from 'actionTypes'; 
import APIFetch from '../lib/Fetch'; 

export function getArticlePids() { 
    return dispatch => { 
     APIFetch().get("/blog/list").then(response => { 
      dispatch({ 
       type: SAVE_ARTICLE_LIST, 
       payload: response.data 
      }) 
     }) 
    } 
} 

组件

import React from 'react'; 
import { connect } from 'react-redux'; 
import * as blogActions from '../actions/blog-actions'; 

@connect(state => ({ 
    blogStore: state.Blogstore 
})) 
export default class Blog extends React.Component { 
    constructor() { 
     super() 
    } 

    componentDidMount() { 
     this.props.dispatch(blogActions.getArticlePids()) 
    } 

    componentDidUpdate(prevProps) { 
     console.log("update", prevProps) 
    } 

    render() { 
     console.log("render", this.props.blogStore) 

     return (
      <div><h1>Blog</h1></div> 
     ) 

    } 
} 

这几乎是它。我不会在粘贴index.js和组件之间的App和Router时感到烦恼，因为这里没有任何兴趣。只是一个基本的反应路由器和与此无关的组件。

Answer 1

您需要从减速返回一个新的对象，像这样：

import Article from 'lib/Article'; 
import { ARTICLE_LOAD, ARTICLE_UPDATE, SAVE_ARTICLE_LIST } from 'actionTypes'; 

const initialBlogState = { 
} 

const Blogstore = (state=initialBlogState, action) => { 
    switch(action.type) { 
     case SAVE_ARTICLE_LIST: 
      return Object.assign({}, state, { 
       init: true, 
       articles: action.payload, 
      }) 
     case ARTICLE_LOAD: 
      return state 
     case ARTICLE_UPDATE: 
      return state 
    } 
    return state 
} 

export default Blogstore; 

否则，如果你尝试直接更新您的状态（因为你正在做的目前）它只会发生变异的内参状态和反应组件将无法检测到更改并且不会重新呈现。 Read more here.