[英]How to update component in react native with a store redux
我正在 react-native 中制作一个应用程序,我使用商店 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
你的组件已经是正确的,你的减速器不是。
您仍在修改原来的 object - 仅仅因为您let nextState = state
并不意味着nextState
是新的 state。 它实际上只是指向原始 state 的指针,因此您仍在修改它。
As all this immutable logic can get quite complicated I would recommend you to check out the official Redux Toolkit which allows you to actually write "mutating" code in their reducers that ends up in an immutable copy automatically:modern redux with redux toolkit (from the官方redux教程)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.