React本地redux未更新组件

Question

我正在尝试使用react native设置redux，但当商店更新时，它没有更新我的组件。

class Dinner extends React.Component {
componentDidUpdate() {
console.log('does not get called when store update');
}
setSelected = (meal) => {
var index = this.props.selectedDinner.indexOf(meal);
if (index === -1) {
console.log('Adding meal to selected: '+meal.name);
if (this.props.selectedDinner[0] === null) {
var tempArr = this.props.selectedDinner;
tempArr[0] = meal;
this.props.setSelectedDinner(tempArr);
} else if(this.props.selectedDinner[1] === null)  {
var tempArr = this.props.selectedDinner;
tempArr[1] = meal;
this.props.setSelectedDinner(tempArr);
} else if(this.props.selectedDinner[2] === null)  {
var tempArr = this.props.selectedDinner;
tempArr[2] = meal;
this.props.setSelectedDinner(tempArr);
}
} else {
console.log("removing meal from selected: "+meal.name)
var tempArr = this.props.selectedDinner;
tempArr[index] = null;
this.props.setSelectedDinner(tempArr);
}
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.forceUpdate()
};
render() {
return (
<View style={{flex: 1, width: 360, justifyContent: 'center', alignItems: 'center', paddingBottom: 20}}>
<View style={{width: 340, backgroundColor: 'white', justifyContent: 'flex-start', alignItems: 'center'}}>
<Text style={{height: 50, fontSize: 20, fontWeight: 'bold', flex: 1, justifyContent: 'center', alignItems: 'center'}}>Dinner</Text>
{
this.props.dinnerFeed.map((prop, key) => 
prop === null ?
<TouchableOpacity style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}><LoadingMealTile /></TouchableOpacity>
:
(prop === 'none' ? 
<TouchableOpacity style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}><BlankMealTile /></TouchableOpacity>
:
this.props.selectedDinner === null || this.props.selectedDinner.indexOf(prop) === null ?
<TouchableOpacity onPress={this.setSelected.bind(this, prop)} style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}><MealTile selected={-1} name={prop.name} id={prop.id} url={prop.url} key={key}/></TouchableOpacity>
:
<TouchableOpacity onPress={this.setSelected.bind(this, prop)} style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}><MealTile selected={this.props.selectedDinner.indexOf(prop)} name={prop.name} id={prop.id} url={prop.url} key={key}/></TouchableOpacity>
)
)  
}
<TouchableOpacity onPress={this.props.loadFeedMeals} style={{width: 320, height: 50, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10}}><Text style={{fontSize: 15, }}>Load More Meals</Text></TouchableOpacity>
</View>
</View>
);
}
}

function mapStateToProps(state) { 
return {
dinnerFeed: state.dinnerFeed,
selectedDinner: state.selectedDinner,
}
};
function mapDispatchToProps(dispatch) {
return {
setDinnerMeals: (dinnerMeals) => dispatch(setDinnerMeals(dinnerMeals)),
setSelectedDinner: (selectedDinner) => dispatch(setSelectedDinner(selectedDinner)),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Dinner);

函数setSelectedDinner正确地更改了redux存储，但组件没有调用其componentDidUpdate函数

编辑：这是减缩器代码

export default (state, action) => {
console.log(action);
switch (action.type) {
case "SET-SELECTED-DINNER":
return {
...state,
selectedDinner: action.selectedDinner
};
default:
return state;
}
};

我认为这段代码不应该直接改变状态，因为我已经在reactjs项目上使用了这个redux的reduce

Answer 1

Redux状态被更新，但连接组件未更新的最常见原因是reducer内的状态发生变化。一个非常相似的常见问题是没有认识到Redux连接HoC执行浅比较。

这是因为Redux通过使用对象相等来检查更改。(如果===比较返回true，则认为对象没有更改。)

考虑以下错误减速器：

function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return state.visibilityFilter = action.filter;
default:
return state
}
} 

由于上面的reducer改变了状态，因此不会触发更新。

一个正确的例子(取自Redux文档)如下所示：

function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
} 

浅层次比较

除了上述不改变状态但总是为任何更改返回新状态的最佳实践外，重要的是要记住，Redux连接对mapStateToProps返回的所有对象都使用这种浅层比较。

考虑一下mapStateToProps函数的简化版本：

function mapStateToProps(state) { 
return {
selectedDinner: state.selectedDinner,
}
};

现在考虑一下你是如何将选定的晚餐传递给你的setSelectedDinner行动的(再次简化)：

setSelected = (meal) => {
var index = this.props.selectedDinner.indexOf(meal);
// when index === -1 we need to add this meal
if (index === -1) {     
// there is no meal at index 0 so we add it                    
if (this.props.selectedDinner[0] === null) {
// NOTICE - the line below still references selected dinner in state!
var tempArr = this.props.selectedDinner;
tempArr[0] = meal;
// NOTICE - we are calling setSelectedDinner with the same object
// that comes from state! 
this.props.setSelectedDinner(tempArr);
}
}
}

所以问题是，在reducer函数中，您将selectedDinner对象替换为其本身，因此Redux看不到任何更新。

解决问题的最快方法是修改reducer函数以读取(切片调用克隆您的数组)：

export default (state, action) => {
switch (action.type) {
case "SET-SELECTED-DINNER":
return {
...state,
selectedDinner: action.selectedDinner.slice()
};
default:
return state;
}
};

还有许多其他的小更改可以使代码更容易使用，并且不容易出现此类错误。两个简单的例子是：

1. 将修改所选Dinner数组的逻辑从组件中移出，并将其放入reducer中。

2. 引入选择器

Answer 2

我认为在redux中更新默认状态时，应该尝试传递当前时间戳。这将使当前状态发生一些更改，并且您在类中的响应也发生了更改。