Question

我目前正在React React中学习一些redux。但是，如果我尝试将我的reducer合并到index.js文件中，我会继续犯一个错误。

(0, _redux.combineReducers) is not a function

我观看了一些有关如何使用它的教程，我遵循了每个步骤，但是它一直出现在屏幕上。

我的App.js看起来像这样：

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>
        );
    }
}

我的reducers.js在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]

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

谢谢大家的建议！

已解决：开始了一个新项目，但没有给它命名为redux本身。

Answer 1

您似乎遇到了与here相同的问题。

TLDR：将您名为redux的文件夹重命名为其他名称，擦除node_modules并重新安装，它应该可以工作。

Answer 2

我将在这里添加此内容，因为今天我遇到了同一问题，幸运的是我很快就发现了这个问题！此错误出现在我的版本中的原因是因为我使用了 babel模块解析器插件，并且将我的模块解析器之一命名为 redux ?如果有人遇到此问题，请确保您没有将任何babel模块解析器的名称与NPM软件包的名称相同。

Answer 3

我们看了很多不同的东西，但是问题出在模块分辨率上。 import { combineReducers } from 'redux'无法正常工作，显然是因为该项目本身在其package.json文件中被命名为'redux'和/或因为该项目根目录中的文件夹被命名为'redux'。

Answer 4

首先，我将在您的项目文件夹中安装ReduxThunk，因此请运行以下命令：

npm i redux-thunk --save

接下来在您的App.js中导入该库，就像这样

import ReduxThunk from 'redux-thunk'

然后创建Redux存储

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

创建化简函数的方法应像这样在reducers.js文件的末尾。

const reducers  = combineReducers({
    libraries,
    //otherFunctions...
});

export default reducers;

别忘了从redux导入reducers.js文件中的CombineReducers方法。

import { combineReducers } from 'redux';

combineReducers方法接受您先前在reducers.js中声明的函数，以用于示例后面的内容（正在编写...）

const INITIAL_STATE = { isLoggedIn: false }
function libraries(state = INITIAL_STATE, action){
   switch (action.type) {       

     default:
      return state
   }
 }

您应该能够根据需要为switch语句编写许多案例。例如。

const INITIAL_STATE = { isLoggedIn: false }
function libraries(state = INITIAL_STATE, action){
   switch (action.type) { 

     case "isLogginSuccess":
      return {...state, isLoggedIn: action.payload}

     default:
      return state
   }
 }

应该通过调用您所需组件中的另一个函数来触发化简用例“ isLogginSuccess”。

React Native-（0，_redux.combineReducers）不是函数

4 个答案: