상태가 변경되지 않아도 React-Redux connect()가 구성 요소를 업데이트하지 않습니다.

Question

입니다. 여기에서 store.subscribe()이 작동하고 connect()이 작동하지 않습니다. 특히 구성 요소가 새 소품으로 업데이트되지 않습니다. 나는 connect()의 얕은 평등 체크가 변경을 무시하고 있을지도 모른다고 생각하면서 주 (state) 변이를 의심했다. 하지만, 감속기의 상태 변경에 Immutable.js을 사용하고 있으며, 내 구독 방법에서 내 자신의 참조 확인을했으며 모든 업데이트에 대해 매우 다른 차이가 있습니다. 렌더링

const store = createStore(combineReducers({ alerts: alertsReducer }), applyMiddleware(ReduxThunk.default)); 

:

//** THIS DOESN'T WORK 
// ReactDOM.render(<Provider store={store}><ConnectedApp /></Provider>, document.getElementById('main')); 

//** THIS WORKS 
store.subscribe(()=>{ 
    render(); 
}); 
const render =() => { 
    ReactDOM.render(<App {...store.getState()} onAlert={ 
     (type, autoHide, message) => store.dispatch({ type: 'SHOW_ALERT', payload: { message, type, autoHide } }) 
     }/>, document.getElementById('main')); 
}; 
render(); 

,691

class App extends React.Component{ 
    ... 
} 

const mapStateToProps = state => ({ 
    alerts: state.alerts 
}); 

const mapDispatchToProps = dispatch => ({ 
    onAlert: (type, autoHide, message) => 
    dispatch({ type: 'SHOW_ALERT', payload: { message, type, autoHide } }) 
}); 

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App); 

감속기 :

const alertsReducer = (alerts=Immutable.List(), { type, payload }) => { 
    switch (type){ 
    case 'SHOW_ALERT': 
     if (!payload.message || R.trim(payload.message).length === 0){   
     throw new Error('Message cannot be empty.'); 
     } 
     return alerts.push(payload); 
    default: 
     return alerts; 
    } 
}; 

스토어 나는

구성 요소 ... 여기가 누락되어 있어야합니다 분명 뭔가 기분이

최상위 상태 개체가 여전히 동일한 참조를 갖고 있기 때문에이 작업이 수행됩니까? 나는 Immutable.js을 제거하고 전체 상태를 감속기가 매번 새로운 배열을 반환하는 배열로 만들었습니다. 여전히 작동하지 않았습니다.

버전 : 만 ReactOwner이 심판을 가질 수 있습니다 : 콘솔을 열면

react-redux@4.4.5 
redux@3.5.2 
react@15.3.1 

Answer 1

는 오류

addComponentAsRefTo (...에게)이있을 것이다. 때문에, 당신은 구성 요소의 render 방법 내에서 생성되지 않은 구성 요소에 심판을 추가 할 수도 있고, 당신이 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.min.js 사이 를 선택해야 그것을 해결하기 위해

로드 반작용의 여러 사본이 React가 페이지에 한 번 추가되어야합니다.

그 후 react-redux에서 제공자를 추가해야합니다. 또한 목록에 주요 소품을 추가해야합니다.

변경된 펜http://codepen.io/anon/pen/dXLQLv?editors=0010