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

Posted 2023-03-10

【中文标题】使用 redux 反应原生路由：错误：期望减速器是一个函数

【英文标题】：React Native routing with redux: Error: Expected the reducer to be a function

【发布时间】：2017-09-07 11:38:37

【问题描述】：

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

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

现在，我有一个包含 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"。

【参考方案1】：

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

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

【讨论】：

我试图简单地调用 createStore(reducers) 不起作用。我认为问题不完全在这里，但可能是我的错误消息中提到的。我真的坚持这个。