Я нахожусь на ранней стадии разработки игры React + Redux и следил за лучшими практиками Redux: чистое редукторное, презентационное/контейнерное разделение компонентов, используя только getState()
в Reducer (в отличие от создателя действия) и т. д. Приложение, похоже, работает как ожидалось, но когда я пытаюсь изменить действие с помощью Time Travel, даже если свойство состояния map[][]
и его вычисленный связанный компонент поддерживают изменение, как ожидалось, результат не отражается на пользовательском интерфейсе (особенно позиция игрока на карте не соответствует тому, что диктует состояние). Когда я проверяю изменения состояния, я вижу, что все необходимые изменения правильно происходят между разными состояниями. Вот мой редуктор:Redux DevTools Time Travel не обновляет пользовательский интерфейс правильно (только при повторном действии)
const gridReducer = (state, action) => {
if (typeof state === 'undefined'){
let dungeon = new Dungeon();
dungeon.generate();
return {
boardWidth: Math.floor(((70/100) * window.innerWidth)/20),
boardHeight: Math.floor(((70/100) * window.innerHeight)/20),
map: dungeon.map,
position: dungeon.playerPosition
}
}
switch (action.type) {
case 'GRID_RESIZE':
return {...state,
boardWidth: action.newBoardWidth,
boardHeight: action.newBoardHeight
}
//This is where I have the issue, map correctly changes both when interacting with the game and when reversing using time travel however the UI fails to update (only in reverse)!
case 'MOVE':
let dungeonObj = new Dungeon(state.map.slice(), {...state.position});
if (dungeonObj.movePlayer(action.direction)) {
return {...state,
position: dungeonObj.playerPosition,
map: dungeonObj.map
}
} else return state;
default:
return state;
}
}
Вот полный код, если вы хотите посмотреть! Приложение поддерживает только перемещение игрока в подземелье с помощью клавиш со стрелками, и вид должен всегда быть centeral на основе позиции игрока (игрок не двигаться назад при использовании путешествия во времени) http://s.codepen.io/sabahang/debug/GjrPNQ
PS: Dungeon.generate использует Math.Random, но я использую эту функцию только в initialState
, и для отправленных действий я делаю только мелкую копию сгенерированной карты, отправив текущее состояние в конструктор Dungeon и используя его другие методы (например. movePlayer)
Я пытаюсь сделать ваш код прямо сейчас, и, похоже, у него нет проблем с функцией Time Travel в моем браузере. (Кажется, вы оставили «отладчик» в строке 87, btw). –
Я нажимаю кнопки со стрелками и запускает действие «MOVE», регистрируя его на боковой панели. Если я сброшу состояние на предыдущий с помощью инструмента отладки, он выглядит нормально. –
@ DanielZendejas спасибо за напоминание отладчика, я удалил его. Не переустанавливайте состояние, а сделайте несколько шагов, а затем используйте ползунок временной трассы, чтобы переместить проигрыватель обратно в путь, по которому вы его перенесли (или переключите некоторые из промежуточных действий «MOVE».Это испортит положение игрока на карте (синяя точка не движется вообще или не реплицирует себя) –