【问题标题】:Why is my Reducer not receiving my Actions? (Using React & Redux)为什么我的 Reducer 没有收到我的操作? (使用 React 和 Redux)
【发布时间】:2016-07-15 03:18:38
【问题描述】:

这些是我当前的动作创建者,他们运行良好并像往常一样返回动作。我已经测试了一些日志记录,它在这里工作:

export function stateToEntry() {
    return { type: types.STATE_TO_ENTRY, formState: 'entry-mode'};
}

export function stateToEdit() {
    return { type: types.STATE_TO_EDIT, formState: 'edit-mode'};
}

export function stateToDelete() {
    return { type: types.STATE_TO_DELETE, formState: 'delete-mode'};
}

这是我当前的减速器,它没有收到我的操作。我这里测试过,好像连控制台都登录不进去:

import * as types from '../actions/actionTypes';

export default function formStateReducer(state = [], action) {
    switch(action.type) {
        case types.STATE_TO_ENTRY:
            console.log('entry-mode');
            return {formState: action.formState};
        case types.STATE_TO_EDIT:
            //console.log('edit-mode');
            return {formState: action.formState};
        case types.STATE_TO_DELETE:
            //console.log('delete-mode');
            return {formState: action.formState};
        default:
            return state;
    }
}

这是我的组合减速器。位置减速器工作正常,但我的 formState 为空,因此它在商店内正确链接。 :

const rootReducer = combineReducers({
    locations,
    formStates
});


export default rootReducer;

我可能错过了什么?

【问题讨论】:

  • 代码看起来不错,除非您将状态默认为空数组,而从下面的代码看来,您希望您的状态成为具有属性formState 的对象。那可能不是你想要的。除了这个问题,您似乎没有提供足够的信息来确定您做错了什么。
  • 检查您是否正确添加和包含减速器
  • 我刚刚发现我没有正确调度我的操作。我正在使用formStateActions.stateToEntry();,我认为这是不正确的。
  • 应该是dispatch(formStateActions.stateToEntry())
  • @LazarevAlexandr 我正在使用bindActionCreators(locationActions, formStateActions, dispatch)。如何正确组合它们?

标签: javascript reactjs redux react-redux reducers


【解决方案1】:

来自文档:bindActionCreators ... 将值是动作创建者的对象转换为具有相同键的对象,但每个动作创建者都包装在一个调度调用中,因此可以直接调用它们。

所以,你用错了,试试这个:

let foo = {
    location: bindActionCreators(locationActions, dispatch),
    form: bindActionCreators(formActions, dispatch)
}
// later in your code -- will dispatch that action automatically
foo.location.someActionFromLocationActionsObject()

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-08-14
    • 2019-05-08
    • 2019-09-03
    • 1970-01-01
    • 1970-01-01
    • 2021-01-06
    • 2020-05-22
    • 1970-01-01
    相关资源
    最近更新 更多