React Redux ведет себя странно
ниже мой редуктор и его результат. Результат очень странный. Переменная actions.pokemons: это массив, каждый элемент которого является объектом. Это значение присваивается a и копируется в b. Я не понимаю, почему b пустой массив. Кроме того, возвращаемое значение - пустой массив, состояние не обновляется?
const pokemons = (state=[], action) => {
switch(action.type){
case types.FETCH_POKEMON:
var a = action.pokemons
console.info(a)
var b = [...action.pokemons]
console.info(b)
return a;
default: return [...state];
}
}
Это мой файл действий:
import * as types from '../constants/index';
import axios from 'axios';
export const actFetchPokemonsRequest = () => {
return dispatch => {
var result = [];
for(var i=1; i<3; i++){
axios({
method: 'GET',
url: `https://pokeapi.co/api/v2/pokemon/${i}`,
data: null
}).then(res => {
// console.info(res.data)
result.push(res.data)
return dispatch(actFetchPokemon(result))
}).catch(err => console.info(err))
}
return dispatch(actFetchPokemon(result))
}
}
export const actFetchPokemon = pokemons => {
return {
type: types.FETCH_POKEMON,
pokemons
}
}Я могу понять, что происходит. В консоли, когда a зарегистрирован, он пуст, пока вы не откроете его. Вот что происходит, когда результат при регистрации отличается от результата при фактическом запуске программы. Действие отправляется с помощью a, который пуст, он копирует его в b, который становится пустым, затем что-то позже по строке добавляет дополнительные элементы в a, что приводит к появлению дополнительных элементов в инструментах разработчика при расширении.
Итак ... убедитесь, что товары есть перед отправкой?
Можете ли вы добавить еще одну строку console.info (action.pokemons) перед назначением переменной a или b. Это прояснит, что происходит.
@kingdaro - это последовательные инструкции, насколько это возможно. ты говоришь
@kingdaro, я не совсем понимаю вашу точку зрения, я добавляю свой файл действий для пояснения
@SibaprasadMaiti результат аналогичен первому сценарию. Я получаю массив с 2 объектами
После обновления с помощью файла действия вы, вероятно, захотите заменить цикл на Promise.all и сопоставить массив Promises. Есть сочетание асинхронного и синхронного кода.
оператор отправки ниже цикла for вызывается синхронно ... вам следует дождаться выполнения всех обещаний, а затем отправить действие.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как кто-то уже упоминал, ваша асинхронная часть не работает так, как вы думаете. Вот что происходит.
- Вы создаете пустой массив с именем result
- Вы запускаете цикл for, и каждый цикл ЗАПУСКАЕТ обещание, вы достигаете конца цикла for перед, любое обещание разрешено. Цикл заканчивается очень быстро, и ваш код переходит к следующему оператору.
- В вашем операторе возврата вы вызываете отправку, передающую действие, которое получает массив. Вы попадаете сюда сразу после цикла for, и поскольку ни одно из обещаний не разрешено, ваш
resultпуст.
Это можно сделать следующим образом:
import * as types from '../constants/index';
import axios from 'axios';
export const actFetchPokemonsRequest = () => {
return dispatch => {
const pokemonRequests = [
axios({ method: 'GET', url: 'https://pokeapi.co/api/v2/pokemon/0', data: null }),
axios({ method: 'GET', url: 'https://pokeapi.co/api/v2/pokemon/1', data: null }),
axios({ method: 'GET', url: 'https://pokeapi.co/api/v2/pokemon/2', data: null }),
];
Promise.all(pokemonRequests).then((responses) => {
const dataArr = responses.map(r => r.data);
dispatch(actFetchPokemon(dataArr));
});
}
}
export const actFetchPokemon = pokemons => {
return {
type: types.FETCH_POKEMON,
pokemons,
}
}
В вашем сокращении у вас будет просто:
const pokemons = (state = [], action) => {
switch(action.type){
case types.FETCH_POKEMON:
return [...action.pokemons];
// Or if you want to simply extend what you currently have
// return [...state, ...action.pokemons];
default:
return state;
}
}
Если вдаваться в подробности асинхронной части, происходит то, что вы запускаете все свои запросы axios. Но вы хотите подождать, пока ВСЕ они разрешатся, здесь вам пригодится Promise.all. Promise.all ожидает разрешения всех обещаний, а затем объединяет в массив ответ (если есть) каждого обещания. Таким образом я могу использовать на нем .map и фактически извлекать поле data из каждого ответа на запрос. Как только я закончу со всем этим, я наконец могу отправить свое действие, теперь передавая действительный массив данных. По Promise.all есть много документации, поэтому я бы рекомендовал взглянуть на нее.
Надеюсь, это поможет с вашей проблемой, дайте мне знать, если это не сработает для вас.
ПРИМЕЧАНИЕ: для простоты я вручную записал все запросы, но есть много лучших способов сделать это динамически.
Я просто хочу проверить поведение оператора спреда