Асинхронизация с редуксом работает? Но все равно выдает ошибку, я должен игнорировать это? - PullRequest
Новая
       5

Асинхронизация с редуксом работает? Но все равно выдает ошибку, я должен игнорировать это?

0 голосов
/ 29 апреля 2018

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

Попытка реализовать промежуточное программное обеспечение 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)

`` `

Мое решение для первого случая для второй ошибки состояло в том, чтобы просто поместить вызов функции ajax в объект in, содержащий свойство «type». Вроде таких 

return (

  {
    type: "Something",


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

  })

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

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

1 Ответ

0 голосов
/ 29 апреля 2018

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

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

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

В ваших действиях.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, чтобы сообщить избыточному пользователю, что вы запросили но еще не получили данные, позволяющие выполнять все виды состояний загрузки.

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

...