Uncaught TypeError: notParked не является функцией

Question

Я использую React Redux и superagent для создания приложения, которое показывает список автомобилей, которые припаркованы на определенной парковке, все с использованием API. Я нашел способ показать список автомобилей.

Каждый автомобиль имеет логическое свойство, называемое припаркованным, припаркованный = true означает, что автомобиль фактически находится на парковке и должен отображаться в списке.

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

Итак, мне нужно использовать запрос PUT, чтобы изменить значение в базе данных и обновить список. довольно просто.

Я уже создал запрос и функцию PUT, создал кнопку в списке и создал событие, поэтому всякий раз, когда вы нажимаете эту кнопку, она выполняет функцию для этого конкретного элемента.

** Проблема: **: нажатие кнопки вызывает ошибку Uncaught TypeError: notParked is not a function at Object.VoitureList._this.onSubmit [as onClick]

вот код: это моя функция внутри actions.js, она принимает идентификатор элемента и изменяет свойство на false:

export const ParkedModified = (voiture) => ({
    type: VOITURE_MODIFIED,
    voiture
});
//Mod
export const notParked = (id) =>{
    return(dispatch)=>{
        return requests.put(
            `/voitures/${id}`,
            {
                parked: false
            }
        ).then(response => dispatch(ParkedModified(response)))
    }
}

и это мой voiturelist.js, где я показываю свой список:

import {notParked} from "../actions/actions";
import {connect} from 'react-redux';

const mapDispatchToProps = {
    notParked
};
export class VoitureList extends React.Component {

    onSubmit = event => {
        const {notParked}= this.props;
        const id = event.currentTarget.getAttribute('data-id');
        console.log(id);
        return notParked(id);
     }


    render() {
        const {voitureList}=this.props;

        return (

            <div className="card mb-3 mt-3 shadow-sm">
                { voitureList.map(voiture => {
                    return (

                      <div className="card-body border-bottom" key={voiture.id}>
                        <p className="card-text mb-0">
                          {voiture.matricule}
                        </p>

                         <Button color="danger" data-id={voiture.id} onClick={this.onSubmit}>changer</Button>
                         </div>         
                    );
                })}
            </div>
        )
    }

и, наконец, мой файл agent.js, в котором я настраивал URL для каждого типа запроса:

import superagentPromise from 'superagent-promise';
import _superagent from 'superagent';

const superagent = superagentPromise(_superagent,global.Promise);
const API_ROOT='http://localhost:8000/api';
const responseBody = response => response.body;

let token =window.localStorage.getItem('jwtToken');



const tokenPlugin = secured => {
    return (request) => {
        if (token && secured){
            request.set('Authorization',`Bearer ${token}`);
        }
};
};
export const requests={
    get: (url, secured = true)=>{
        return superagent.get(`${API_ROOT}${url}`).use(tokenPlugin(secured)).then(responseBody);
    },
    post: (url, body = null, secured = true) => {
        return superagent.post(`${API_ROOT}${url}`, body).use(tokenPlugin(secured)).then(responseBody);
    },
    put: (url, body = null, secured = true) => {
        return superagent.put(`${API_ROOT}${url}`, body).use(tokenPlugin(secured)).then(responseBody);
    },
    setToken: (newJwtToken) => token = newJwtToken
    };

Редактировать

import React from 'react';
import {notParked,notParkedAction } from "../actions/actions";
import {connect} from 'react-redux';

const mapDispatchToProps = (dispatch) => {
    return {
        notParked: (id) => dispatch(notParkedAction(id)),
    }
}
export class VoitureList extends React.Component {

    componentDidMount() {
    }
    componentWillUnmount() {
    }
    onSubmit = event => {

        const id = event.currentTarget.getAttribute('data-id');
        const {notParked}= this.props.notParked(id);
        return notParked(id);

     }

    render() {
        const {voitureList}=this.props;

        return (

            <div className="card mb-3 mt-3 shadow-sm">
                { voitureList.map(voiture => {
                    return (

                            <div className="card-body border-bottom" key={voiture.id}>
                                <p className="card-text mb-0">
                                    {voiture.matricule}
                                </p>

                                <Button color="danger" data-id={voiture.id} onClick={this.onSubmit}>changer</Button>
                            </div>         
                    );
                })}
            </div>
        )
    }

export default connect(null, mapDispatchToProps)(VoitureList); 

Мой магазин

import { combineReducers } from "redux";
import parkinglist from "./reducers/parkinglist";
import {reducer as formReducer} from 'redux-form';
import auth from "./reducers/auth";
import {routerReducer} from "react-router-redux";
import parking from "./reducers/parking";
import voitureList from "./reducers/voitureList";
import nameOfYourReducer from "./reducers/voiture";

export default combineReducers({
    parkinglist,
    parking,
    auth,
    router: routerReducer,
    form: formReducer,
    voitureList,
    nameOfYourReducer
});

Answer 1

Я не совсем понимаю синтаксис, который вы используете в notParked, но я бы сделал что-то вроде этого:

import { notParkedAction } from 'actions.js';

// ...

const mapDispatchToProps = (dispatch) => {
    return {
        notParked: (id) => dispatch(notParkedAction(id)),
    }
}

// mapStateToProps = null is you do not use it

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent)

notParked будет доступно через реквизиты, а notParkedAction - ваше действие редуктора.

Также кажется, что вы хотите использовать асинхронную функцию с Redux, вы должны использовать redux-thunk.

Помните, что действия должны только изменять состояние вашего хранилища, а не делать другие вещи

// actions.js

export function notParkedAction(id) {
    return {
        type: 'NOT_PARKED', payload: { id: id }
    }
}

// reducer.js

function nameOfYourReducer(state, action) {

    switch (action.type) {
        case 'NOT_PARKED':
            return {
                ...sate,
                id: action.payload.id,
            };
        default:
            return state;
    }

}

export default nameOfYourReducer;

// store.js

import nameOfYourReducer from 'reducer.js';

const rootReducer = combineReducers({
    nameOfYourReducer,
    // your other reducers...
});

const store = createStore(rootReducer);

export default store;