如何使用存储redux更新react native中的组件

Question

我正在react native中制作一个应用程序，我使用store redux来管理玩家，每个玩家都有一个id和一个名称。所以我已经做了添加和设置播放器的操作，一切都很好，当我有了播放器时，组件会更新，setPlayer也是如此。现在我想对删除进行操作，但当我按下删除按钮时，组件没有更新，但我确信播放器是在后台删除的。

这里的代码(播放器的组件(

---

import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' // Pour ajouter la corbeille
import { vw, vh } from 'react-native-viewport-units-fix' 
import { View, TouchableOpacity, StyleSheet, TextInput, ScrollView } from 'react-native'
import { connect } from 'react-redux'
const heightPlayer = 8*vh;
const sizeIcon     = 12*vw;

class JoueurListe extends React.Component {
_listItems() {
return (

this.props.tabJoueur.map((joueur) =>
<View 
style={styles.container_player}
key={joueur.id}>          
<TextInput
style={[this.props.style, styles.player]}
maxLength={12}
placeholder={joueur.player_name}
placeholderTextColor='#446C85'
onChangeText={(text) => this._setPlayer(text, joueur.id)}
/>
<TouchableOpacity onPress={() => this._delPlayer(joueur.id)}>
<MaterialCommunityIcons
name={"delete"}
size ={sizeIcon}
style={styles.delete}
/>
</TouchableOpacity>
</View> )
)
}
_delPlayer(index) {
const action = { type:'DEL_PLAYER', index: index}
this.props.dispatch(action)
}
_setPlayer(text, index) {
let action;
if ( text === "") action = { type: "SET_PLAYER", player_name: "Joueur "+ index, index: index }
else              action = { type: "SET_PLAYER", player_name: text, index: index }
this.props.dispatch(action)
}
_showPlayer() {
return (
<View style={{flexDirection: 'column', width: '100%'}}>
{this._listItems()}
</View>
)
}
_addPlayer() {
const action = { type: "ADD_PLAYER", player_name: "Joueur " }
this.props.dispatch(action)
}
render() {
return (
<ScrollView style={styles.main_container}>
{this._showPlayer()}
<TouchableOpacity style={styles.container_player} onPress={() => this._addPlayer()}>
<Ionicons name="add-circle" size={sizeIcon}/>
</TouchableOpacity>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
main_container: {
flexDirection: 'column',
width: '100%',
top: '15%',
marginLeft: 25*vw,
marginBottom: 20*vh
},
container_player: {
flexDirection: 'row',
justifyContent: 'center',
height: heightPlayer,
borderRadius: 15,
borderColor: '#BFB9B9',
borderWidth: 2,
textAlign: 'center',
backgroundColor: 'white',
marginBottom: '4%',
width: '75%',
paddingLeft: 2*vw,
paddingRight: 2*vw
},
player: {
left: '0%',
color: '#446C85',
fontSize: 20,
width: '75%'
},
title: {
fontSize: 32,
},
delete: {
right: '0%'
}

})
const mapStateToProps = (state) => {
return state
}

export default connect(mapStateToProps)(JoueurListe)

---

和存储

---

let idJoueur = 1;
const initialState = {
tabJoueur: [{id: 1, player_name: "Joueur 1"}]
}
function reducerPlayer(state = initialState, action) {
let nextState = state
switch (action.type) {
case 'ADD_PLAYER':
return nextState = {
tabJoueur: [...state.tabJoueur, { id: ++idJoueur , player_name: action.player_name + idJoueur } ]                
}
case 'SET_PLAYER':
nextState.tabJoueur[action.index-1] = {id: action.index, player_name: action.player_name }
return nextState
case 'DEL_PLAYER':
if (idJoueur > 1) {
nextState.tabJoueur.splice(action.index-1, 1)
for (let i=action.index-1;i<nextState.tabJoueur.length;i++){
let tmp = nextState.tabJoueur[i].player_name
if ( tmp.includes("Joueur ") )tmp="Joueur " + (i+1)
nextState.tabJoueur[i] = { id: i+1, player_name: tmp}
}
console.log(nextState.tabJoueur)
idJoueur--
}
return nextState
default:
return nextState
}

}
export default reducerPlayer

---

Answer 1

您的组件已经正确，而减速器则不正确。

您仍然在修改那里的原始对象——仅仅因为您修改了let nextState = state并不意味着nextState是一个新状态。它实际上只是一个指向原始状态的指针，所以您仍在修改它。

由于所有这些不可变的逻辑可能会变得相当复杂，我建议您查看官方的Redux Toolkit，它允许您实际编写"；突变"；它们的reducer中的代码，最终自动保存在一个不可变的副本中：带有redux工具包的现代redux(来自官方redux教程(