[javascript] Cómo usar adecuadamente redux con navegación nativa a la reacción



Answers

Estoy usando solo redux y react-redux . Crear una tienda con createStore con algunos middlewares (después de hacer combineReducers ):

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

Aplicación de registro:

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

Usando estado en componentes:

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

Conectando el componente al estado usando connect :

export default connect(mapStateToProps)(HomeScene);
Question

He estado intentando hacer una configuración usando reaccionar-native-router-flux y seguí los pasos. Luego traté de seguir los ejemplos y también de registrar una gran cantidad de información para intentar realizar una ingeniería inversa para que funcione. Sin embargo, incluso después de toda la información que pude encontrar, terminé con una estructura de estado extraño:

scene es un objeto que contiene el estado del enrutador. Sin embargo, el estado inicial se replica dentro de la scene (por lo que contiene nuevamente objetos de devices y rooms ).

Si cambio los dispositivos de estado ordinario o las rutas arroja un error como: La Key <name of the key> has already been defined (otras personas informan los mismos problemas aquí ).

Así que mi pregunta es: ¿cómo encaminar sus aplicaciones nativas reaccionar con redux? ¿Usas otras bibliotecas? ¿Hay algún ejemplo o recurso documentado que pueda usar para corregir mi código?

Piensa que tiene una estructura de reducción típica. Por el bien del ejemplo, así es como se ve en mi 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>
    )
  }
}



Links