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

终极版/ 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商店？根据{{3}}中的示例，尝试按照这样的方式声明您的商店。

＆＃13;

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

＆＃13;

使用redux反应本机路由：错误：期望reducer是一个函数

1 个答案: