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

三个错误，

在reducer中：您的状态是object而不是列表。
在减速器中：将有效负载分配给aqiType键
在调度中：有效载荷是一个字符串，而不是一个对象。

要解决：

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检查了basic example。

Answer 2

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

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

欢呼

Answer 3

尝试如下操作功能内的return：

import { SET_AQITYPE } from "./types";

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

Redux操作未触发-没有错误

3 个答案: