연결 저장 구성 요소가 변경된 후에 연결 구성 요소가 다시 렌더링되지 않습니다.

Question

redux 저장소가 변경된 후에 연결된 구성 요소가 다시 렌더링되지 않습니다.

가게 구조 :

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

내가 UPDATE 동작 작성자 파견하고 있습니다 :

매장 상태를 업데이트 dispatch(profile.actions.update({email: 'blah@blah.com'}));

하지만 이 연결된 ProfilePage 구성 요소를 다시 렌더링하지 않습니다 !

-

/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

내 생각이 업데이트 전과 같은 사용자 개체가 같은 개체가 있다는 것이다 - 따라서 redux는 아무 변화가 없다고 가정합니다. 프로파일 감속기와 사용자의 combineReducers를 사용하는 것이 비현실적이며 의도하지 않은 결과를 초래할 수 있습니다. 사용자 감속기에 프로필 필드를 직접 추가하고 새 사용자 객체를 반환해야합니다. 더 나은 방법은 전자 메일 필드를 사용자 개체에 넣고 프로필을 함께 정리하는 것입니다.

Answer 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;