redux-observable-action $ .ofType不是函数

Question

I'm trying to do a small POC of using redux-observable so bear with me, all of my code is in one file (index.js)

I'm getting this error:

action$.ofType is not a function

at the marked line of code below:

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

The error makes it sound like I have not imported redux-observable correctly. I use webpack 2. I have done yarn add redux-observable which is all that is required then I can just do import xxx but am I importing correctly in my code above? I am unsure how to import redux-observable. I cannot see it being done in the docs.

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"
    }
}

Answer 1

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

Setting up redux-observable is described here in the docs: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html However it appears you have indeed seen that, cause you are importing it.

You're almost correct in how you set it up, and in fact you have commented out code that does it correctly.

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

You're accidentally passing the Epic as-is, to applyMiddleware instead of passing it as an argument to createEpicMiddleware

applyMiddleware(createEpicMiddleware(fetchCategoriesEpic))

That should solve it!

Answer 2

According to me if you are using yarn then to add a single package you have to use yarn add your-package-name and what you did is yarn install redux-observable please change this to yarn add redux-observable

When we use yarn install ? yarn install is used when you have already defined your package names in package.json and running just yarn install makes it work and installs all the packages in few seconds.

Cheers :)