Redux observable - l'action de .ofType $ est pas une fonction

Question

Je suis en train de faire un petit POC d'utiliser Redux observable avec moi donc supporter, tout mon code est dans un fichier (index.js)

Je reçois cette erreur:

action$.ofType is not a function

à la ligne marquée code ci-dessous:

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 

L'erreur donne l'impression que je n'ai pas importé redux-observable correctement. J'utilise webpack 2. J'ai fait yarn add redux-observable qui est tout ce qui est nécessaire alors je peux juste faire import xxx mais est-ce que j'importe correctement dans mon code ci-dessus? Je ne sais pas comment importer redux-observable. Je ne peux pas le voir se faire dans les 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.

La mise en place est décrit Redux observable ici dans la documentation: https://redux-observable.js.org/docs/basics/SettingUpTheMiddleware.html Cependant, il semble que vous avez bien vu que, parce que vous l'importez.

Vous êtes presque correct dans la façon dont vous l'avez configuré, et en fait vous avez commenté le code qui le fait correctement.

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

vous passez accidentellement l'épopée en l'état, à applyMiddleware au lieu de passer comme un argument pour createEpicMiddleware

applyMiddleware(createEpicMiddleware(fetchCategoriesEpic)) 

Cela devrait le résoudre!

Answer 2

Selon moi, si vous utilisez un fil, puis d'ajouter un seul paquet, vous devez utiliser yarn add your-package-name et ce que vous avez fait est yarn install redux-observable s'il vous plaît changer cela yarn add redux-observable

Lorsque nous utilisons yarn install? yarn install est utilisé lorsque vous avez déjà défini vos noms de paquets en package.json et en cours d'exécution seulement yarn install le fait fonctionner et installe tous les paquets en quelques secondes.

À la vôtre :)