如何使用商店 redux 更新本機反應組件

Question

我正在 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

---

Answer 1

你的組件已經是正確的，你的減速器不是。

您仍在修改原來的 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教程）