web-dev-qa-db-fra.com

React + Redux - Erreur non capturée: le réducteur devait être une fonction

J'ai essayé de réagir simple, redux, exemple de travail ajax et suivi tutoriel API Reddit , mais je ne peux pas créer de magasin et obtenir erreur:

Uncaught Error: Expected the reducer to be a function.

index.jsx

...

import { createStore, applyMiddleware } from 'redux'
var thunkMiddleware = require('redux-thunk');
var createLogger = require('redux-logger');
var rootReducer = require('./reducers.js');

        const loggerMiddleware = createLogger();

        function configureStore(initialState) {
            return createStore(
                rootReducer,
                initialState,
                applyMiddleware(
                    thunkMiddleware,
                    loggerMiddleware
                )
            )
        }

        const store = configureStore();

...

rootReducer.js

import { combineReducers } from 'redux';

function products(state = {
    isFetching: false,
    didInvalidate: false,
    items: []
}, action) {
    switch (action.type) {
        case 'REQUEST_PRODUCTS':
            return Object.assign({}, state, {
                isFetching: true,
                didInvalidate: false
            })
        case 'RECEIVE_PRODUCTS':
            return Object.assign({}, state, {
                isFetching: false,
                didInvalidate: false,
                items: action.posts,
                lastUpdated: action.receivedAt
            })
        default:
            return state
    }
}

function specialPosts(state = { }, action) {
    switch (action.type) {
        case RECEIVE_SPECPOSTS:
        case REQUEST_SPECPOSTS:
            return Object.assign({}, state, {
                req: true
            })
        default:
            return state
    }
}

const rootReducer = combineReducers({
    products,
    specialPosts
});

export default rootReducer;

 enter image description here

Le type de rootReducer est object, mais pourquoi? Devrais-je changer la fonction createStore en rootReducer.default?

return createStore(
    rootReducer.default,
    initialState,
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
     )
)

package.json

"redux-logger": "^2.6.1",
"react-redux": "^4.4.1",
"react-redux-provide": "^5.2.3",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1",
javascriptreactjsredux
11
Matt
const rootReducer = combineReducers({
    products,
    specialPosts
});

const store = createStore( rootReducer, applyMiddleware( thunkMiddleware ));

L'état initial est alors créé automatiquement à partir des états initiaux renvoyés par les différentes fonctions de réduction. Ces états individuels sont accessibles en tant que state.products et state.specialPosts

3
Tom

Le problème était dû à l’importation de rootReducer par "require" (ES5):

var rootReducer = require('./reducers.js');

Si vous l'importez via la méthode ES6, il enregistrera correctement le fichier par défaut de rootReducer.js automatiquement dans rootReducer, comme prévu:

import rootReducer from './reducers';

Je vois que vous mélangez ES5 (require) et ES6 (import) dans ce fichier ... Je mixais aussi dans mon projet, c'est pourquoi j'ai rencontré ce problème. Plus d'informations peuvent être trouvées ici: https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.2x2p2dx3m

8
Mike Lambert

J'utilise VS Code Insiders et parfois les modifications ne sont pas enregistrées correctement. Donc, si vous avez suivi tout ce qui précède et que l'erreur persiste, accédez à chaque fichier et appuyez sur STRG + S. Cela a résolu le problème pour moi.

0
Matthis Kohli

Lorsque vous créez store, le premier argument doit être fonction, ce qui signifie que le paramètre réduire (()=>[])

Erreur: 

import {createStore,applyMiddleware} from 'redux';


export default function configureStore(initialState) {
  return createStore(
    [],
    {},
    applyMiddleware()
  );
}

Solution: 

import {createStore,applyMiddleware} from 'redux';


export default function configureStore(initialState) {
  return createStore(
    ()=>[],
    {},
    applyMiddleware()
  );
}
0
KARTHIKEYAN.A

rootReducer

/* index.js */

import AppReducer from './reducers';
// import {AppReducer} from './reducers';
// bugs : must be a root reducer, can not be use as a module









/* reducers.js */ 

// initial state
const initialState = {
    angular: 0,
    react: 0,
    vuejs: 0
};


// reducers update state 
const AppReducers = (state = initialState, action) => {
    switch (action.type) {
        case 'VOTE_ANGULAR':
            console.log("Vote Angular!");
            return (
                Object.assign(
                    {}, 
                    state, 
                    {
                        angular: state.angular + 1
                    }
                )
            );
        case 'VOTE_REACT':
            console.log("Vote React!");
            return (
                Object.assign(
                    {}, 
                    state, 
                    {
                        react: state.react + 1
                    }
                )
            );
        case 'VOTE_VUEJS':
            console.log("Vote Vue.jsc!");
            return (
                Object.assign(
                    {}, 
                    state, 
                    {
                        vuejs: state.vuejs + 1
                    }
                )
            );
        default:
            return state;
    }
};

export {AppReducers};
export default AppReducers;
0
user8202629