Async с сокращением работает? Но все же дает ошибку, следует ли игнорировать ее?

123
13

Я использую смесь ларавелла, реагирую.

Попытка внедрения промежуточного программного обеспечения redux-thunk. У меня проблемы с асинхронными вызовами. Я хотел бы использовать jquery для ajax (который успешно извлекает данные API, но я получаю сообщение об ошибке, которое читает,

"Ошибка: отправка не является функцией", то есть я не могу внести никаких изменений в магазин. Из того, что я понимаю, диспетчерская передача и GetState передаются через посредство среднего уровня. Правильно? Почему я не могу использовать эту функцию?

Это также дает мне ошибку, которая гласит: "Ошибка: у действий может не быть неопределенного свойства типа". У вас ошибка с константой? "

Еще одна проблема, возникшая после попытки решить вышеупомянутую проблему: "Ошибка: действия должны быть обычными объектами. Используйте специальное промежуточное программное обеспечение для асинхронных действий".

Я прочитал много подобных вопросов, но я все еще не могу заставить его работать.

"Действия должны быть простыми объектами. Используйте специальное промежуточное программное обеспечение для асинхронных действий".

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import FilterBar from './SideBar/FilterBar';
import Store from '../redux/store/mainStore';
import { REMOVE_ATTRIBUTE_FILTER,ADD_ATTRIBUTE_TO_FILTER, removeAttribute } from '../redux/actions/actions';

Store.subscribe(()=>{
console.log("store changes", Store.getState())
})

console.log(Store.getState());

Store.dispatch({
type:ADD_ATTRIBUTE_TO_FILTER,
payload:{'make':23}

})

if (document.getElementById('InventoryDisplay')) {


ReactDOM.render(
<Provider store={Store}>
<FilterBar/>
</Provider>
,document.getElementById('FilterBar'));


}

mainstore.js

"""

import { createStore,applyMiddleware,combineReducers,compose } from 'redux';
import thunk from 'redux-thunk';
import {inventoryFilter,availableAttributes} from '../reducers/reducer';

const Store = createStore(

///combine imported reducers
combineReducers({
activeFilter:inventoryFilter,
availableAttributes:availableAttributes

},
///initilize store
{},

applyMiddleware(thunk)

));

export default Store;

 

"""

actions.js, что актуально

"""

///first case
const getAttributes2 = (dispatch) => {
return(
$.ajax('/getFilteredAttributes/', {
type: 'GET',
dataType : 'json'
}).done(response => {
dispatch(addAttribute("make",32));
}).fail((xhr, status, error) => {
console.log("failed");
})
)

};

///second case
const getAttributes = (dispatch) => {
return ()=>{}

}

export {
ADD_ATTRIBUTE_TO_FILTER,addAttribute,
REMOVE_ATTRIBUTE_FILTER,removeAttribute,
GET_INVENTORY,getInventory,
GET_AVAILABLE_ATTRIBUTES,getAttributes,

}

"""

компонент подключается для хранения этого действия отправки

"""

import React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import * as ActionCreators from '../../../redux/actions/actions';

class DropDownList extends React.Component{
componentDidMount(){
this.props.addAttributes("make",32)
this.props.getAttributes()
this.props.removeAttributes("make",32)

}
render(){

return(

<div>
</div>

)


}


}

function mapStatesToProps(state){
return{
activeFilters:state.activeFilter,
availableAttributes:state.availableAttributes
}
};

const mapDispatchToProps = dispatch => {
return {
addAttributes: (type,value) => {
dispatch(ActionCreators.addAttribute(type,value))
},
removeAttributes: (type,value) => {
dispatch(ActionCreators.removeAttribute(type,value))
},
getAttributes: () => {
dispatch(ActionCreators.getAttributes())
}
}
}

DropDownList.propTypes = {
availableAttributes: PropTypes.object.isRequired,
activeFilters: PropTypes.object.isRequired,
}
export default connect(mapStatesToProps,mapDispatchToProps)(DropDownList)

"""

Моим решением для случая 1 для второй ошибки было просто поместить вызов функции ajax в объект, содержащий свойство типа. Подобно

return (

{
type: "Something",

$.ajax('/getFilteredAttributes/', {
type: 'GET',
dataType: 'json'
}).done(response => {
dispatch(addAttribute("make", 32));
}).fail((xhr, status, error) => {
console.log("failed");
})

})

Вызов ajax сделан, но отправка по-прежнему недоступна, я теряюсь и искал лучшее решение? Может быть, я что-то переусердствовал или пропустил мелочь. Я пробовал другие решения, но никто не работал для меня.

Пожалуйста помоги.

спросил(а) 2021-01-28T01:44:09+03:00 3 месяца, 1 неделя назад
1
Решение
124

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

Мне кажется, что, как вы используете thunk, это немного странно. Функция, возвращаемая действием, которое вы отправляете, имеет отправку и getState в качестве аргументов:

В вашем случае ваше действие может выглядеть так

В ваших actions.js:

export function getAttributes2(){
return function(dispatch, getState){
// you could dispatch a fetching action here before requesting!
return $.ajax('/getFilteredAttributes/', {type: 'GET', dataType: 'json'})
.done(response => dispatch(saveTheResponseAction(response)))
.fail((xhr, status, error) => console.log("failed"))
}

Отображение этой функции для ваших реквизитов:

import {getAttributes2} from '../../../redux/actions/actions';

const mapDispatchToProps = dispatch => {
return {
getAttributes2: () => dispatch(getAttributes2()),
}
}

Таким образом, вы можете отправить действие из.done части вашего api-вызова с результатом, вы можете ответить на ошибки, вы даже можете отправить действие, прежде чем возвращать свой api-вызов, чтобы дать скидкам знать, что вы запросили, но еще не получил данные, позволяющие выполнять все виды состояний загрузки.

Надеюсь, это поможет, дайте мне знать :)

ответил(а) 2021-01-28T01:44:09+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема