Redux action не запускается - ошибок нет

Question

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

Я пытаюсь отправить по щелчку в компоненте. Я также попытался вставить console.log в действие, чтобы увидеть, запускается ли он, но это не так. Redux dev tools также не предполагает, что его даже уволят при нажатии.

onClick={() => {
   setAQIType(name);
}}

Действие:

import { SET_AQITYPE } from "./types";

export const setAQIType = (AQIType) => dispatch => {
    dispatch({
        type: SET_AQITYPE,
        payload: { AQIType }
    });
};

Редуктор:

import { SET_AQITYPE } from '../actions/types';

const initialState = {
    aqiType: 'DEFAULT',
    loading: false,
};

export default function(state = initialState, action){

    const { type, payload } = action;

    switch(type){
        case SET_AQITYPE:
            return [...state, payload];
        default:
            return state;
    }

}

Типы:

export const SET_AQITYPE = 'SET_AQITYPE';

Answer 1

Три ошибки,

1. В редукторе: ваше состояние - object, а не список.
2. В редукторе: назначьте полезную нагрузку aqiType ключ
3. В отправке: Полезная нагрузка - это строка, а не объект.

Исправление:

export const setAQIType = (AQIType) => dispatch => {
    dispatch({
        type: SET_AQITYPE,
        payload: AQIType // (3) pass as string
    });
};

// In reducer
case SET_AQITYPE:
  return { // (1) object
    ...state,
    aqiType: payload // (2) specify aqiType key
  };

Предполагается, что вы проверили basicпример с connect() и mapDispatchToProps.

Answer 2

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

https://react -redux.js.org / using-реагировать-redux / connect-mapdispatch

Приветствия

Answer 3

Попробуйте return внутри функции действия, как показано ниже:

import { SET_AQITYPE } from "./types";

export const setAQIType = (AQIType) => dispatch => {
    return dispatch({
        type: SET_AQITYPE,
        payload: { AQIType }
    });
};