javascript - 播放器未更新

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 语句中将状态替换为玩家，如下所示:

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

您所做的将返回整个玩家状态，而不是与 action.id 没有相同 id 的玩家

正如您所看到的，players[0] 和players[2] 而不是一个对象，而是由 3 个对象组成的数组，即 3 个玩家。

我所做的只是更改您的 map 函数以按原样返回玩家。