如何修复此错误 "combineReducers" 是只读的。在 react-native/react-redux 中答案

【问题标题】：How to fix this error "combineReducers" are read-only. in react-native/react-redux如何修复此错误 "combineReducers" 是只读的。在 react-native/react-redux 中
【发布时间】：2019-09-18 19:30:54
【问题描述】：

我正在使用 redux 在 react-native 中创建一个新的 todo 应用程序。在使用 combineReducers 设置 rootReducer 时出现以下错误。

“combineReducers”是只读的。

// reducers/todos.js

let nextId = 0;
const todos = (state = [], action) => {
    switch (action.type) {

        case 'ADD_TODO':

            return [
                ...state, {
                    id: nextId++,
                    text: action.text,
                    completed: false,
                }
            ]

        case 'TOGGLE_TODO':
            return state.map(todo =>
                (todo.id === action.id) ? { ...todos, completed: !todo.completed } : todo)

        default:
            return state
    }
}
export default todos;

创建了一个可见性过滤器来切换待办事项状态。


// reducers/visibilityFilter.js

const visibilityFilter = (state='SHOW_ALL', action) =>{
    return state;
}

export default visibilityFilter;

将两个 reducer 合并到索引文件中。

// reducers/index.js 

import { combineReducers } from 'redux';

import todos from './todos';
import visibilityFilter from './visibilityFilter';

export default combineReducers = combineReducers({
    todos,
    visibilityFilter
})

这是我的商店文件

import { createStore } from 'redux';

import rootReducer from '../reducers';

export default store = createStore(rootReducer);

【问题讨论】：

标签： react-native react-redux

【解决方案1】：

你为什么会这样？

export default combineReducers = combineReducers({
    todos,
    visibilityFilter
})

combineReducers() 是这样写的：

import { combineReducers } from "redux";

export default combineReducers({
  todos: () => {
    return {};
  }
});

尝试并记住reducer 必须始终返回一个对象、一个字符串或一个数字，这是开始使用reducer 的最低要求，以确保您的应用不会中断并且您可以获得一些内容到屏幕上。

另外，您不一定需要将您的combineReducers() 标识为rootReducer，您可以像这样将它们放在一起：

import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducers from "../reducers";

const store = createStore(reducers, {}, compose(applyMiddleware(thunk)));

export default store;

最后，当您创建了store 后，您需要将其导入回您的App.js 并使用Provider 标记将其连接起来，例如：

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import { Provider } from "react-redux";

import store from "./store";

还有：

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <MainNavigator />
        </View>
      </Provider>
    );
  }
}

【讨论】：

【解决方案2】：

正如消息中明确指出的，您不能重新分配combineReducers。只需将您的代码更改为以下内容，如the docs 中所述：

export default rootReducer = combineReducers({
    todos,
    visibilityFilter
})

【讨论】：