javascript español - Cómo usar adecuadamente redux con navegación nativa a la reacción





método react: (4)


Ahora también puede usar NavigationExperimental directamente de reaccionar nativo.

Puedes encontrar más sobre esto en este enlace .

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



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



según mis experiencias de sufrimiento, no hay forma de evitar que el Router vuelva a renderizar si lo envuelve bajo un Provider y escucha las actualizaciones de redux , es una naturaleza por diseño.

El punto de cómo evitar esto es: el Router debe renderizar una vez y solo una vez significa:

Si no se conectó a redux en absoluto, funciona bien, ya que su Router no se activará por ninguna de las actualizaciones de redux.

Además, puede connect() Router a la redux para obtener los accesorios del método dispatch() pero NO puede escuchar otros accesorios.

Por lo tanto, la arquitectura sería:

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 Escribí los códigos anteriores directamente aquí, tenga en cuenta el error de sintaxis :)

Punto a favor:

  1. Router debe renderizarse una vez y solo una vez (conéctese para obtener solo el método de envío o no conectarse)
  2. precrear escenas a través de Actions.create () y pasarlo a Router
  3. mueve la lógica principal de tu aplicación a uno de los hijos de Router

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

esto se contestó originalmente en https://github.com/aksonov/react-native-router-flux/issues/376#issuecomment-241965769

gracias @jsdario por mencionarlo aquí, espero que esto ayude








javascript reactjs react-native redux react-redux