Плеер не обновлен

Question

Итак, в своем приложении я пытаюсь обновить возраст игрока.

Сначала я добавляю трех игроков.

const playerOne = store.dispatch(addPlayer({
    firstName: 'Theo',
    lastName: 'Tziomakas',
    position: 'Goakeeper',
    birthDate: '38773',
    age: 24
}));

const playerTwo = store.dispatch(addPlayer({
    firstName: 'Vasilis',
    lastName: 'Tziastoudis',
    position: 'Defender',
    birthDate: '78773',
    age: 28
}))

const playerThree = store.dispatch(addPlayer({
    firstName: 'Michael',
    lastName: 'Jordan',
    position: 'Defender',
    birthDate: '89900',
    age: 32
}))

Предположим, я хочу обновить возраст второго игрока до 38 Я вызываю метод updatePlayer

store.dispatch(updatePlayer(playerTwo.player.id, { age: 43 }))

Это то, что я получаю в ответ

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at eval (redux-players.js?b284:127)
    at Array.filter (<anonymous>)
    at getVisiblePlayers (redux-players.js?b284:124)
    at eval (redux-players.js?b284:151)
    at Object.dispatch (createStore.js?6413:173)
    at eval (redux-players.js?b284:181)
    at Object.<anonymous> (bundle.js:691)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:348)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:63
    at bundle.js:66

, что означает, что игрока нет. Как такое возможно, ведь плеер был добавлен?

Вот мой полный код

import { createStore, combineReducers } from 'redux'; 
import uuid from 'uuid';

const playersReducerDefaultState = [];

// ADD_PLAYER
const addPlayer = (
    {
        firstName = '',
        lastName = '',
        position = '',
        birthDate = 0,
        age = 0
    } = {}) => ({
        type: 'ADD_PLAYER',
        player: {
            id: uuid(),
            firstName,
            lastName,
            position,
            birthDate,
            age
        }
});

// REMOVE_PLAYER
const removePlayer = ( {id} = {}) => ({
    type: 'REMOVE_PLAYER',
    id
});

// UPDATE_PLAYER
const updatePlayer = (id, updates) => ({
    type: 'UPDATE_PLAYER',
    id,
    updates
});

const playersReducer = (state = playersReducerDefaultState, action) => {
    switch(action.type) {
        case 'ADD_PLAYER':
            return [
                ...state,
                action.player
            ]
        case 'REMOVE_PLAYER':
            return state.filter(({id}) => id !== action.id);
        case 'UPDATE_PLAYER': 
            return state.map((player) => {
                if(player.id === action.id) {
                    return {
                        ...player,
                        ...action.updates
                    }
                } else {
                    return state;
                }
            })    
        default: 
        return state;
    }
};

const filtersReducerDefaultState = {
    text: '',
    sortBy: 'age',
    startAge: undefined,
    endAge: undefined
}

// SET_TEXT_FILTER
const setTextFilter = (text = '') => ({
    type: 'SET_TEXT_FILTER',
    text
})

// SORT_BY_AGE
const sortByAge = () => ({
    type: 'SORT_BY_AGE'
});

// SET_START_AGE
const setStartAge = (startAge) => ({
    type: 'SET_START_AGE',
    startAge
})

// SET_END_AGE
const setEndAge = (endAge) => ({
    type: 'SET_END_AGE',
    endAge
})

const filtersReducer = (state = filtersReducerDefaultState, action) => {

    switch(action.type){ 
        case 'SET_TEXT_FILTER':
            return {
                ...state,
                text: action.text
            }
        case 'SORT_BY_AGE':
            return {
                ...state,
                sortBy: 'age'
            }  
        case 'SET_START_AGE':
            return {
                ...state,
                startAge: action.startAge
            } 
        case 'SET_END_AGE':
            return {
                ...state,
                endAge: action.endAge
            }               
        default:
            return state
        }
}


const getVisiblePlayers = (players, { text, sortBy, startAge, endAge }) => {
    return players.filter((player) => {
        const startDateMatch = typeof startAge !== 'number' || player.age >= startAge;
        const endDateMatch = typeof endAge !== 'number' || player.age <= endAge;
        const textMatch = player.lastName.toLowerCase().includes(text.toLowerCase());
        return startDateMatch && endDateMatch && textMatch;
        // const textMatch = expense.description.toLowerCase().includes(text.toLowerCase());

        // return startDateMatch && endDateMatch && textMatch; 
    }).sort((a, b) => {
        if (sortBy === 'age') {
            return a.age < b.age ? 1 : -1
        } else if (sortBy === 'birthDate') {
            return a.birthDate < b.birthDate ? 1 : - 1
        }
    });
};

// Creating store
const store = createStore(
    combineReducers({
        players: playersReducer,
        filters: filtersReducer
    })
);

store.subscribe(() => {
    const state = store.getState();
    const visiblePlayers = getVisiblePlayers(state.players, state.filters);
    console.log(visiblePlayers); 
});

const playerOne = store.dispatch(addPlayer({
    firstName: 'Theo',
    lastName: 'Tziomakas',
    position: 'Goakeeper',
    birthDate: '38773',
    age: 24
}));

const playerTwo = store.dispatch(addPlayer({
    firstName: 'Vasilis',
    lastName: 'Tziastoudis',
    position: 'Defender',
    birthDate: '78773',
    age: 28
}))

const playerThree = store.dispatch(addPlayer({
    firstName: 'Michael',
    lastName: 'Jordan',
    position: 'Defender',
    birthDate: '89900',
    age: 32
}))

// store.dispatch(removePlayer({ id: playerThree.player.id } ));
//store.dispatch(updateExpense(expenseThree.expense.id, { age: 43 }))
store.dispatch(updatePlayer(playerTwo.player.id, { age: 43 }))

// store.dispatch(setStartAge(0));
// store.dispatch(setEndAge(35));
//store.dispatch(setTextFilter('Theo'))

Спасибо, Тео

Answer 1

В вашем playerReducer здесь:

case "UPDATE_PLAYER":
  return state.map(player => {
    if (player.id === action.id) {
      return {
        ...player,
        ...action.updates
      };
    } else {
      return state;
    }

Все, что вам нужно сделать, это в инструкции else заменить состояние на player следующим образом:

case "UPDATE_PLAYER":
  return state.map(player => {
    if (player.id === action.id) {
      return {
        ...player,
        ...action.updates
      };
    } else {
      return player;
    }

То, что у вас было на месте, вернет все состояние игрока вместо игроков, у которых не было того же идентификатора с action.id

Как вы можете видеть, Players [0] и Players [2] вместо объекта представляют собой массив 3 объекта, 3 игрока.

Все, что я сделал, это изменил функцию вашей карты, чтобы вернуть игрока как есть.