redux-observable — action$.ofType не является функцией

Я пытаюсь сделать небольшой POC с использованием redux-observable, так что терпите меня, весь мой код находится в одном файле (index.js)

Я получаю эту ошибку:

action$.ofType не является функцией

в отмеченной строке кода ниже:

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

Ошибка звучит так, как будто я неправильно импортировал избыточное наблюдаемое. Я использую webpack 2. Я сделал yarn add redux-observable, и это все, что требуется, затем я могу просто сделать import xxx, но правильно ли я импортирую в свой код выше? Я не уверен, как импортировать redux-observable. Я не вижу, как это делается в документах.

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

person BeniaminoBaggins    schedule 20.04.2017    source источник


Ответы (2)


Я не уверен, как импортировать redux-observable. Я не вижу, как это делается в документах.

Настройка redux-observable описана здесь в документации: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html Однако похоже, что вы действительно видели это, потому что вы импортируете его.

Вы почти правильно его настроили, и на самом деле вы закомментировали код, который делает это правильно.

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

Вы случайно передаете Epic как есть applyMiddleware вместо того, чтобы передать его в качестве аргумента createEpicMiddleware

applyMiddleware(createEpicMiddleware(fetchCategoriesEpic))

Это должно решить эту проблему!

person jayphelps    schedule 20.04.2017
comment
Благодарю вас! Это работает. Однако я хотел бы использовать remote-redux-devtools (поэтому вместо этого используйте мою закомментированную строку), но в нем есть ошибка store.getState не является функцией. Мне было интересно, должен ли мой код быть неправильным где-то еще в моем приложении. Но это работает, когда я использую applyMiddleware(createEpicMiddleware(fetchCategoriesEpic)). У вас есть идеи, что может быть причиной этой ошибки только при использовании composeWithDevTools(createEpicMiddleware(fetchCategoriesEpic))? - person BeniaminoBaggins; 21.04.2017
comment
composeWithDevTools(applyMiddleware(createEpicMiddleware(fetchCategoriesEpic))) сделал свое дело. Спасибо еще раз :) - person BeniaminoBaggins; 21.04.2017

По моему мнению, если вы используете пряжу, то для добавления одного пакета вам нужно использовать yarn add your-package-name, и то, что вы сделали, это yarn install redux-observable, пожалуйста, измените это на yarn add redux-observable

Когда мы используем yarn install ? yarn install используется, когда вы уже определили имена пакетов в package.json, а запуск только yarn install заставляет его работать и устанавливает все пакеты за несколько секунд.

Ваше здоровье :)

person Codesingh    schedule 20.04.2017
comment
Ах, мужик, ты прав, извини, что я использовал add. Я неправильно сказал в своем вопросе. Извинения. - person BeniaminoBaggins; 21.04.2017