componentDidUpdateが起動しない

Question

私はしばらくの間、反応還元型の生態系を理解するために苦労してきました。私はほとんどそこにいますが、私が問題を抱えていることはまだあります。これはcomponentDidUpdateメソッドです。非同期アクションをディスパッチすると、ストアはリデューサーが正しく呼び出され、コンポーネントの状態が更新されます。

何らかの理由で、componentDidUpdateメソッドが起動せず、再レンダリングが行われず、更新されたプロップにアクセスできません。私はconsole.log（this.props.blogStore）なら、devtoolsでそれが変わるのを見ることができます。最初は空のオブジェクトとして表示されますが、クリックすると開いて更新された状態が表示されます。

私は可能な限り多くのライフサイクルメソッドを試しましたが、何も動作しないように見えます（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 
} 

減速

0かなりそれである

ブログ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.