如何在反應原生導航中正確使用redux

Question

我一直在嘗試使用react-native-router-flux進行設置並按照步驟進行操作。 然后嘗試按照示例進行操作，並記錄大量信息以嘗試對其進行反向工程。 然而，即使遵循我可以找到的所有信息，我最終得到了一些奇怪的狀態結構：

scene是包含路由器狀態的對象。 但是，初始狀態在scene內復制（因此它再次包含devices和rooms對象）。

如果我更改普通狀態設備或路由，則會拋出錯誤： Key <name of the key> has already been defined （其他人在此報告相同的問題）。

所以我的問題是：你如何使用redux路由你的本機應用程序？ 你使用其他圖書館嗎？ 我可以使用任何示例或文檔資源來修復我的代碼嗎？

認為它具有典型的redux結構。 為了示例，這是它在我的app/index.js上的外觀：

import React, { Component } from 'react'
import { Router, Scene } from 'react-native-router-flux'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider, connect } from 'react-redux'
import logger from 'redux-logger'

import reducers from './reducers'
import Home from './components/home'
import Device from './components/devices'
import Login from './components/login'

const middleware = [logger()]
const store = compose(
  applyMiddleware(...middleware)
)(createStore)(reducers)

const RouterWithRedux = connect(reducers)(Router)

export default class AppContainer extends Component {
  render () {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key='login' component={Login} title='Login' />
            <Scene key='root' initial={true}>
            <Scene key='home' component={Home} title='Home' />
            <Scene key='device' component={Device} title='Device' />
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

Answer 1

根據我的痛苦經歷，如果你把它包裝在一個Provider並且從redux監聽更新，就沒有辦法阻止Router重新渲染，這是設計的本質。

如何防止這種情況，是： Router應該渲染一次，只需一次就意味着：

如果您根本沒有連接到redux，它可以正常工作，因為您的Router不會被redux的任何更新觸發。

另外，你可以connect() Router到redux來獲取一個dispatch()方法道具，但你不能聽另一個道具。

因此，架構將是：

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


// --- child component can connect and listen to props they want.
const myConnectedMainConponent = connect()(myMainConponent);
const myConnectedLoginConponent = connect()(myLoginConponent);

// --- Create it via Actions.create(), or it will be re-created for each render of your Router
const scenes = Actions.create(
    <Scene key="root">
        <Scene key="login" component={myLoginConponent} />
        <Scene key="main" component={myMainConponent} />
    </Scene>
);

// --- Create connected Router if you want dispatch() method.
// --- Or you can just use vanilla Router
const myConnectedRouter = connect()(Router);

// --- your exported main router
export default class MyExportedRouter extends React.Component {
    constructor(props) {
        super(props);
    };

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

ps我直接輸入上面的代碼，請注意語法錯誤:)

采取的點：

1. Router應該只渲染一次（連接只獲取調度方法或根本不連接）
2. 通過Actions.create（）預創建場景並將其傳遞給路由器
3. 將您的應用主邏輯移動到路由器的其中一個子節點

=====================

這最初是在https://github.com/aksonov/react-native-router-flux/issues/376#issuecomment-241965769上回復的

感謝@jsdario在這里提一下，希望這會有所幫助

Answer 2

我只使用redux和react-redux 。 使用帶有一些中間件的createStore創建商店（在執行combineReducers ）：

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk, promiseMiddleware())),
);

注冊應用：

AppRegistry.registerComponent('app', () => () => (
  <Provider store={store}>
    <MainComponent />
  </Provider>
));

在組件中使用state：

const mapStateToProps = (state) => ({
  isLoading: state.core.isLoading,
});

使用connect組件連接到狀態：

export default connect(mapStateToProps)(HomeScene);

Answer 3

您現在也可以直接從react-native使用NavigationExperimental 。

您可以在此鏈接上找到更多相關信息。