React-Redux connect()即使在没有突变的情况下更改状态也不会更新组件
React-Redux connect() not updating component even when the state is changed without mutation
我有这个 codepen,其中 store.subscribe()
有效而 connect()
无效。具体来说,该组件不会使用新道具进行更新。我怀疑状态突变,因为我认为 connect() 的浅层相等性检查可能忽略了变化。但是,我在 reducer 中使用 Immutable.js
进行状态更改,并且我还在我的订阅方法中进行了自己的引用检查,每次更新甚至都略有不同。我觉得这里一定缺少一些明显的东西......
组件:
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;
}
};
商店:
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();
这是因为顶级状态对象仍然具有相同的引用吗?我尝试删除 Immutable.js
并使整个状态成为数组,reducer 每次都返回一个新数组。那还是不行。
版本:
react-redux@4.4.5
redux@3.5.2
react@15.3.1
如果打开控制台,会出现错误
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might
be adding a ref to a component that was not created inside a
component's render
method, or you have multiple copies of React
loaded
要解决它,您应该在 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.min.js 之间进行选择
和
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js,因为 React 应该被添加到页面一次。
之后你需要从 react-redux 添加 Provider。您还需要在列表中添加关键道具。
我有这个 codepen,其中 store.subscribe()
有效而 connect()
无效。具体来说,该组件不会使用新道具进行更新。我怀疑状态突变,因为我认为 connect() 的浅层相等性检查可能忽略了变化。但是,我在 reducer 中使用 Immutable.js
进行状态更改,并且我还在我的订阅方法中进行了自己的引用检查,每次更新甚至都略有不同。我觉得这里一定缺少一些明显的东西......
组件:
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;
}
};
商店:
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();
这是因为顶级状态对象仍然具有相同的引用吗?我尝试删除 Immutable.js
并使整个状态成为数组,reducer 每次都返回一个新数组。那还是不行。
版本:
react-redux@4.4.5
redux@3.5.2
react@15.3.1
如果打开控制台,会出现错误
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's
render
method, or you have multiple copies of React loaded
要解决它,您应该在 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.min.js 之间进行选择 和 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js,因为 React 应该被添加到页面一次。
之后你需要从 react-redux 添加 Provider。您还需要在列表中添加关键道具。