接続されたコンポーネントは、reduxストアが変更された後に再レンダリングされません。

Question

reduxストアが変更された後、接続されたコンポーネントが再レンダリングされません。

ストア構造：

店の状態を更新

dispatch(profile.actions.update({email: 'blah@blah.com'}));

が、しない再レンダリング接続ProfilePageコンポーネント：

{ 
    user: { 
    profile: { 
     email: null 
    } 
    } 
} 

私はUPDATEアクションの作成者を派遣しています！

-

/ProfilePage.js（連結成分）

//component omitted 

function mapStateToProps(state) { 
    return { 
    initialFormValues: state.user.profile 
    } 
} 

export default connect(mapStateToProps)(ProfilePage) 

/profileReducer.js（更新アクションが傍受される）

export default function(state = { email: null }, action) { 
    switch (action.type) { 
    case t.UPDATE: 
     return { ...state, ...action.values }; //this is a new object (not mutated) 
    default: 
     return state; 
    }; 
}; 

/userReducer.js

import { combineReducers } from 'redux'; 
import session from './session'; 
import profile from './profile'; 

export default combineReducers({ 
    profile: profile.reducer 
}); 

/rootReducer.js

import {combineReducers} from 'redux'; 
import {routerReducer as router} from 'react-router-redux'; 
import { reducer as form } from 'redux-form'; 
import user from './modules/user'; 

const rootReducer = combineReducers({ 
    form, 
    user: user.reducer, 
    router 
}) 

export default rootReducer; 

/store.js

import reducer from './rootReducer'; 
import thunk from 'redux-thunk' 
import logger from 'redux-logger' 

import { createStore, compose, applyMiddleware } from 'redux'; 
import { routerMiddleware as router } from 'react-router-redux'; 

export default function(history) { 
    return createStore(
    reducer, 
    compose(
     applyMiddleware(
     router(history), 
    thunk, 
    logger 
    ) 
    ) 
) 
} 

Answer 1

私の推測では、それは、更新前とユーザーオブジェクトが同じオブジェクトであるということです - したがって、還元は何も変わらないと仮定します。プロファイル減速器とcombineReducersを使用しているユーザーは、意識していないように思え、意図しない結果が生じている可能性があります。ユーザレデューサにプロファイルフィールドを直接追加して、新しいユーザオブジェクトを返す必要があります。さらに、メールボックスをユーザーオブジェクトに配置し、プロファイルを一括して配置するだけです。

Answer 2

私は2つの別々のストアインスタンスを誤って初期化したようです。ディスパッチ（Appコンポーネントのマウント時に呼び出される）が別のストアを使用していました。それが再レンダリングされなかった理由です

class App extends Component { 
     componentDidMount(props) { 
     const jwt = localStorage.getItem('jwt'); 
     if(!!jwt) { 
**  store(history).dispatch(user.actions.fetchUserData(jwt)) // the offending code 
     } 
     } 

     render() { 
     return (
      <Provider store={ store(history) }> // And here a different store instance 
      <ConnectedRouter history={ history }> 
       <AppWrapper> 
      <MainNav /> 
      <Main> 
       <Switch> 
      <Route path="/login" 
       component={ LoginPage } /> 
     <Route path="/register" 
       component={ RegisterPage } /> 
      </Switch> 
      </Main> 
      </AppWrapper> 
     </ConnectedRouter> 
      </Provider> 
     ); 
     } 
    } 
    export default App;