减速器收到的先前状态具有意外类型的"功能"。预期参数为具有以下键的对象:" register"

时间:2017-02-08 15:02:39

标签: asynchronous redux redux-thunk

所以redux thunk给了我这个错误(或者也许不是redux-thunk而是扩展名)

The previous state received by the reducer has unexpected type of "Function".
Expected argument to be an object with the following keys: "register"

商品

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

const store = createStore(
    reducers,
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__()
);

export default store;

减速器

import { combineReducers } from 'redux';

import register from './register';

const reducers = combineReducers({
    register
});

export default reducers;

动作

import axios from 'axios';

export function changeDOB(payload) {
    return dispatch => {
        console.log('test');
    }
}

但出于某种原因,当我删除window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__()错误消失时,我不知道扩展程序为什么会给我这个错误,但看起来我是唯一一个遇到错误的人它。我在google上搜索过,无法找到与此错误相关的任何内容。

顺便说一句,还有一个错误,因此onload会弹出错误,当我尝试测试操作时,会产生以下错误:

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

但当我删除此部分window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__()时,我在控制台上看到test表示操作成功(因为它现在的作用是什么)。但我需要这个部分用于开发目的,所以我该如何处理这个问题。我想我在这里做错了什么。

1 个答案:

答案 0 :(得分:2)

您的商店增强器设置不正确。 applyMiddleware是商店增强器的一个示例。商店增强工具是向商店添加自定义功能的高级功能。

基本上所有商店增强器都应通过相同的参数通过函数组合传递。

如果要将多个商店增强程序传递到商店,则使用“撰写”。商店增强器是更高阶的功能,可为商店添加一些额外的功能。

为了简化操作,需要安装一个npm包:

npm install --save redux-devtools-extension

并像这样使用:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

如果您不希望在应用程序投入生产时使用redux dev工具,可以使用redux文档中的替代设置

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import * as reducers from '../reducers/index';

let reducer = combineReducers(reducers);
let middleware = [thunk];

let finalCreateStore;

// In production, we want to use just the middleware.
// In development, we want to use some store enhancers from redux-devtools.
if (process.env.NODE_ENV === 'production') {
  finalCreateStore = applyMiddleware(...middleware)(createStore);
} else {
  finalCreateStore = compose(
    applyMiddleware(...middleware),
    require('redux-devtools').devTools()
  )(createStore);
}

let store = finalCreateStore(reducer);