reduxでネイティブルーティングに反応する：エラー：レデューサーが関数であると予想されました

Question

ReduxがReactネイティブアプリケーションでルーティング状態を処理しようとしています。ルーティング処理に使用するコンポーネントは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; 

また反応し、ネイティブ・ルータのことを覚えておいてください-fluxはReducers.jsの減速機にアクションとして "THE_KEY"を送ります。これは例えばボタンonPress = "Actions.THE_KEY"。

Answer 1

あなたはreduxストアをどのように作成するのですか？ createStore docsの例のように、このように店舗を宣言してみてください。

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