Cfrgtkky

I'm currently learning some redux in React Native. But i keep stumbling on one error if i try to combine my reducers in a index.js file.

(0, _redux.combineReducers) is not a function

I watched some tutorials for how to use this and I follow with every step but it's keep coming on my screen.

My App.js looks like this:

import React, { Component } from 'react';

import { Platform, StyleSheet, Text, View } from 'react-native';

import ReduxThunk from 'redux-thunk';

import { Provider } from 'react-redux';

import { createStore, applyMiddleware } from 'redux';

import reducers from './reducers/reducers';

import { Header } from './components/common/Header';



let store   = createStore(reducers, applyMiddleware(ReduxThunk));



export default class App extends Component {

    render() {

        return (

            <Provider store={ store }>

                <View style={ styles.container }>

                    <Header title="Tech Stack"/>

                </View>

            </Provider>

        );

    }

}

My reducers.js in the folder src/reducers:

console.log('HELLO');

import { combineReducers } from 'redux';

console.log( combineReducers );

import LibraryReducer from './LibraryReducer';



const reducers = combineReducers({

    libraries: LibraryReducer

});



export default reducers;



// Fixed the log. When i'm loggin combineReducers i get undefined.

LibraryReducer.js

import data from '../data/LibraryList.json';



export default () => data;



Console errors: 

[Error log][1]

data json:

[

    {

        "id": 0,

        "title": "React",

        "description": "JS framework"

    },

    {

        "id": 1,

        "title": "Vue",

        "description": "JS framework"

    },

    {

        "id": 2,

        "title": "Angular",

        "description": "JS framework"

    }

]

package.json

{

  "name": "redux",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start",

    "test": "jest"

  },

  "dependencies": {

    "react": "16.6.1",

    "react-native": "0.57.5",

    "react-redux": "^5.1.1",

    "redux": "^4.0.1",

    "redux-thunk": "^2.3.0"

  },

  "devDependencies": {

    "babel-jest": "23.6.0",

    "jest": "23.6.0",

    "metro-react-native-babel-preset": "0.49.2",

    "react-test-renderer": "16.6.1"

  },

  "jest": {

    "preset": "react-native"

  }

}

THANK YOU ALL for your suggestions!

SOLVED:
Started a new project but don't gave it the name redux itself.

So first of all i would install ReduxThunk on your project folder, so run following:

npm i redux-thunk --save

next in your App.js import this lib like so

import ReduxThunk from 'redux-thunk'

then create the Redux Store

const store = createStore(reducers, applyMiddleware(ReduxThunk))

the Method for creating the reducers functions should be at the end of your reducers.js file like so.

const reducers  = combineReducers({

    libraries,

    //otherFunctions...

});



export default reducers;

don´t forget to import the combineReducers method from redux in your reducers.js file.

import { combineReducers } from 'redux';

combineReducers method accept functions that you previously declared in your reducers.js for expample following ( im writing...)

const INITIAL_STATE = { isLoggedIn: false }

function libraries(state = INITIAL_STATE, action){

   switch (action.type) {       



     default:

      return state

   }

 }

you should be able to write many cases for the switch statement as you want. for example..

const INITIAL_STATE = { isLoggedIn: false }

function libraries(state = INITIAL_STATE, action){

   switch (action.type) { 



     case "isLogginSuccess":

      return {...state, isLoggedIn: action.payload}



     default:

      return state

   }

 }

the reducer case "isLogginSuccess" should be trigered by calling another funcion inse your desired component.

It looks like you have the same issue as here.

TLDR: rename the folder you have called redux to something else, wipe your node_modules and reinstall and it should work.

We looked at a lot of different things, but the problem was one with module resolution. import { combineReducers } from 'redux' was not working, apparently because the project, itself, was given the name 'redux' in its package.json file and/or because a folder in the project's root was named 'redux'.