终极版观察的 - 行动$ .ofType不是一个函数

我试图做使用Redux的可观测的小POC如此忍受我，我所有的代码是在一个文件（index.js）

我得到这个错误：

action$.ofType is not a function

在下面的代码标记线：

index.js

//@flow 
import { createStore, applyMiddleware } from 'redux' 
import { combineReducers } from 'redux-immutable' 
import { Provider } from 'react-redux' 
import Vepo from './components/vepo/Vepo' 
import keywords from './components/keywords/keywords.reducer' 
import categories from './components/categories/categories.reducer' 
import initialState from './config/config' 
import { composeWithDevTools } from 'remote-redux-devtools' 
import React from 'react' 
import devToolsEnhancer from 'remote-redux-devtools' 
import Rx from 'rxjs/Rx' 

import { ajax } from 'rxjs/observable/dom/ajax' 
import { createEpicMiddleware } from 'redux-observable' 
import { } from 'redux-observable' 

const FETCH_CATEGORIES = 'FETCH_CATEGORIES' 
const FETCH_CATEGORIES_FULFILLED = 'FETCH_CATEGORIES_FULFILLED' 

// action creators 
const fetchCategories = Categories => ({ type: FETCH_CATEGORIES, payload: Categories }); 
const fetchCategoriesFulfilled = payload => ({ type: FETCH_CATEGORIES_FULFILLED, payload }); 

// epic 
const fetchCategoriesEpic = action$ => 
    action$.ofType(FETCH_CATEGORIES)<=======================THIS LINE 
    .mergeMap(() => 
     ajax.getJSON(`https://localhost:4000/categories`) 
     .map(response => fetchCategoriesFulfilled(response)) 
    ); 


const categories1 = (state = {}, action) => { 
    switch (action.type) { 
    case FETCH_CATEGORIES_FULFILLED: 
     return [action.payload.login] 
    default: 
     return state; 
    } 
}; 

const reducer = combineReducers(
    { 
    searchForm: combineReducers(
    { 
     keywords, 
     categories 
    }) 
    } 
) 
const store = createStore(
    reducer, 
    initialState, 
    applyMiddleware(fetchCategoriesEpic) 
    //composeWithDevTools(createEpicMiddleware(fetchCategoriesEpic)) 
) 

const App =() => (
    <Provider store={store}> 
    <Vepo /> 
    </Provider> 
) 

export default App

该错误使得它听起来像我没有正确导入redux-observable。我使用webpack 2.我已经完成了yarn add redux-observable这就是所需要的，然后我可以做import xxx但是我在上面的代码中正确导入了吗？我不确定如何导入可重复观察。我无法看到它在文档中完成。

的package.json

{ 
    "name": "vepo", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
     "start": "node node_modules/react-native/local-cli/cli.js start", 
     "test": "jest" 
    }, 
    "rnpm": { 
     "assets": [ 
      "./app/fonts" 
     ] 
    }, 
    "jest": { 
     "preset": "react-native", 
     "moduleNameMapper": { 
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", 
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js" 
     } 
    }, 
    "dependencies": { 
     "flow-typed": "^2.0.0", 
     "immutable": "^3.8.1", 
     "native-base": "^2.1.0", 
     "react": "16.0.0-alpha.6", 
     "react-native": "^0.43.3", 
     "react-native-multiple-choice": "^0.0.8", 
     "react-native-select-multiple": "^1.0.3", 
     "react-native-vector-icons": "^4.0.0", 
     "react-redux": "^5.0.3", 
     "redux": "^3.6.0", 
     "redux-immutable": "^4.0.0", 
     "redux-observable": "^0.14.1", 
     "reselect": "^3.0.0", 
     "rxjs": "^5.2.0", 
     "yoga": "^0.0.0" 
    }, 
    "devDependencies": { 
     "babel-eslint": "^7.1.1", 
     "babel-jest": "19.0.0", 
     "babel-preset-react-native": "1.9.1", 
     "eslint": "^3.17.0", 
     "eslint-plugin-flowtype": "^2.30.3", 
     "eslint-plugin-jsx": "^0.0.2", 
     "eslint-plugin-react": "^6.10.0", 
     "eslint-plugin-react-native": "^2.3.1", 
     "flow-bin": "^0.42.0", 
     "jest": "19.0.2", 
     "jest-cli": "^19.0.2", 
     "react-test-renderer": "~15.4.1", 
     "redux-devtools": "^3.3.2", 
     "remote-redux-devtools": "^0.5.7" 
    } 
}

来源

2017-04-20 BeniaminoBaggins

I am unsure how to import redux-observable. I cannot see it being done in the docs.

设置终极版，可观察到在文档描述如下：https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html不过看来你确实已经看到了，因为你导入它。

你是差不多正确的设置方式，实际上你已经注释掉了正确的代码。

applyMiddleware(fetchCategoriesEpic) 
//composeWithDevTools(createEpicMiddleware(fetchCategoriesEpic))

你无意中传递史诗原样，以applyMiddleware而不是将它作为参数传递给createEpicMiddleware

applyMiddleware(createEpicMiddleware(fetchCategoriesEpic))

这应该解决它！

来源

2017-04-20 20:28:00 jayphelps

谢谢！它确实有效。不过，我想使用'remote-redux-devtools'（所以使用我的注释掉的行），但它有一个错误“store.getState不是一个函数”。我想知道如果我的代码在我的应用程序的其他地方一定是错的。但是，当我使用'applyMiddleware（createEpicMiddleware（fetchCategoriesEpic））'时它正在工作。你有什么想法可以让它只有在使用'composeWithDevTools（createEpicMiddleware（fetchCategoriesEpic））'时才会出现这个错误？ – BeniaminoBaggins

'composeWithDevTools（applyMiddleware（createEpicMiddleware（fetchCategoriesEpic）））'做了窍门。再次感谢:) – BeniaminoBaggins

据我，如果你正在使用的纱线，然后添加你必须使用yarn add your-package-name和你做了什么是一个封装yarn install redux-observable请将此更改为yarn add redux-observable

当我们使用yarn install？当您已经在package.json中定义了您的软件包名称，并且只运行yarn install使其运行并在几秒钟内安装所有软件包时，将使用yarn install。

干杯:)

来源

2017-04-20 21:01:56 Codesingh

啊，你是对的对不起，我确实使用'add'。我在我的问题中说错了。道歉。 – BeniaminoBaggins

终极版观察的 - 行动$ .ofType不是一个函数

回答

相关问题