Redux 动作未触发 - 无错误

Question

我试图在点击时调用一个简单的动作来触发调度动作。 我似乎无法得到结果，甚至没有迹象表明它正在发射。

我正在尝试在组件中单击时分派。 我还尝试在操作中放置一个 console.log 以查看它是否甚至被触发，但它没有。 Redux 开发工具也不建议它在点击时被触发。

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. 在减速器中：您的 state 是object而不是列表。
2. 在 reducer 中：将有效负载分配给aqiType键
3. 在调度中：有效负载是一个字符串，而不是 object。

修理：

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
  };

这假设您已经使用connect()和mapDispatchToProps检查了基本示例。

Answer 2

您很可能错过了将组件与 redux 存储连接，这意味着没有调度 function 传递给您的操作。

https://react-redux.js.org/using-react-redux/connect-mapdispatch

干杯

Answer 3

尝试return内部操作 function 如下：

import { SET_AQITYPE } from "./types";

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