2016-04-02 24 views
2

我想簡單的反應,終極版,Ajax的例子,其次Reddit API tutorial,但我無法創建存儲和獲取錯誤:陣營+終極版 - 未捕獲的錯誤:預期減速機是一個功能

Uncaught Error: Expected the reducer to be a function. 

指數。 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

rootReducer類型的對象,但爲什麼呢?我是否應該將createStore函數更改爲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", 
+0

@dandavis錯誤的片段。我已經編輯過它。 – Matt

+0

我需要rootReducer'var rootReducer = require('./ redurs.js')。default;' – Matt

回答

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

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

初始狀態,然後從由個人減速器函數返回初始狀態自動創建。這些個別國家可以爲state.products訪問和state.specialPosts

+4

可能會添加一個解釋,說明你正在改變什麼? – codemonkey

+0

您可能需要添加更多解釋才能使尋求類似解決方案的其他人理解。 – Shamseer

4

的問題是由於rootReducer被進口「規定」(ES5):

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

如果通過ES6方法導入它,它會正確保存在rootReducer.js'默認自動進入rootReducer如你預期:

import rootReducer from './reducers'; 

我看你是在該文件中混合ES5(要求)和ES6(進口)......我在我的項目混合爲好,這這就是我遇到這個問題的原因。更多信息可以在這裏找到:https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.2x2p2dx3m

0

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

'從'./reducers'導入{AppReducer};'會出錯! –

0

我用VS代碼業內人士有時更改不正確保存。所以,如果你按照上面的說明進行操作,錯誤仍然存​​在,請轉到每個文件並按STRG + S。它解決了我的問題。

相關問題