使用 redux 反应原生路由：错误：期望减速器是一个函数

Question

我正在尝试让 Redux 在 React Native 应用程序中处理我的路由状态。我用来处理路由的组件是react-native-router-flux。

我收到的错误消息是“预计减速器是一个函数”。 Here is the full error.这个问题我已经有很长时间了，无法弄清楚。我正在理解越来越多的 Redux 概念，但现在我不得不寻求帮助。根据阅读有关同一问题的 stackoverflow 帖子，我发现这可能是一些导出/导入问题，但我、我的项目成员或我的高级开发人员都看不到它。

现在，我有一个包含 3 个不同类的最低设置，包括我的路由器组件。请记住，为简单起见，我从主文件 App.js 创建了商店。

容器/App.js

import React, { Component } from 'react';
import { Provider, connect } from 'react-redux';
import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
import routingReducer, { counter, userReducer } from './../Redux/Reducers';

const RouterWithRedux = connect()(NavigationRouter);

// Combine Reducers
const reducers = combineReducers({
    userReducer,
    routingReducer,
});

// create store...
const middleware = [/* ...your middleware (i.e. thunk) */];
const store = compose(
    applyMiddleware(...middleware))(createStore)(reducers);

export default class App extends Component {
  render () {

    return (
      <Provider store={store}>
        <RouterWithRedux />
      </Provider>
    )
  }
}

Redux/Reducers.js

import { ActionConst } from 'react-native-router-flux';

const routingState= {
    scene: [],
};


const userState = {
    users: [],
}

// The Routing Reducer
export default function routingReducer(state = routingState, action = {}) {
    switch (action.type) {
        // focus action is dispatched when a new screen comes into focus
        case ActionConst.FOCUS:
            return Object.assign({}, state, {
                scene: action.scene,
            });

        // ...other actions

        default:
            return state;
    }
};

// The User Reducer
export function userReducer(state = userState, action = {}) {
    switch(action.type) {
        case 'USER_LIST_SUCCESS':
            return Object.assign({}, state, {
                users: action.users
            });
    }
    return state;
};

导航/MyExportedRouter.js

import React from 'react'
import { Router, Scene, Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';

import SettingsContainer from './../Containers/SettingsContainer'
import LoginWrapper from './../Containers/LoginWrapper'

const myConnectedRouter = connect()(Router);
// TODO: Define Scene keys as "ENUMS": loginScreen -> TO_LOGIN
const scenes = Actions.create(
    <Scene key="root">
        <Scene initial key='TO_LOGIN' component={ LoginWrapper } title='LaunchScreen' hideNavBar />
        <Scene key='TO_SETTINGS_VIEW' component={ SettingsContainer } title='Monthly View'  />
    </Scene>
);

class MyExportedRouter extends React.Component {
    constructor(props) {
        super(props);'
    };

    render() {
        return (
            <myConnectedRouter scenes={scenes} />
        );
    }
}

export default MyExportedRouter;

还请记住，react-native-router-flux 将“THE_KEY”作为操作发送到 Reducers.js 中的 reducer。这是通过例如完成的。一个按钮 onPress="Actions.THE_KEY"。

Answer 1

您确定这就是您创建 redux 商店的方式吗？按照createStore docs 中的示例，尝试像这样声明您的商店。

const store = createStore(
  reducers,
  applyMiddleware(...middleware)
);