reactjs - español - ¿Cuáles son sus mejores prácticas para precargar el estado inicial en sus aplicaciones de Redux?
redux saga español (1)
Actualmente no estoy contento con los hacks que he creado utilizando Flux, y ahora Redux para rellenar initialState en mi tienda.
Siempre envío una carga útil de JSON con la carga inicial de la página. JavaScript universal no es una opción en algunas de mis aplicaciones, ya que no todas están respaldadas por Node. Me gustaría centrarme en las "mejores prácticas" y los patrones en torno a cómo se cargan los datos en el cliente. Entonces, siento que mudarme al servidor es trivial.
Aquí hay un resumen de lo que estoy haciendo actualmente en el trabajo y en algunas otras aplicaciones de juguetes que usan Redux:
https://gist.github.com/kevinold/5767bb334472b7e2bfe3
Para resumir:
- Estoy enviando variables globales hacia abajo con la página.
- En componentDidMount () estoy enviando acciones que "reciben" y manejan los diversos datos. (Estos métodos de "recepción" se utilizan cuando se procesan estos bits de datos cuando se obtienen de forma asíncrona a través de una acción de solicitud, y los estoy reutilizando aquí ya que ya tengo los datos).
Esto funciona y no hay ningún problema con el que nos encontremos, pero se siente como un truco con el que no estoy realmente contento. Además, siento que el estado inicial de Redux no está contento con que lo haga de esta manera.
Según http://rackt.org/redux/docs/recipes/ServerRendering.html y la sección "El lado del cliente", puedo pasar initialState a mi tienda.
Aquí hay un parche que tengo para otro proyecto con el que estoy ayudando (KeystoneJS). Estoy pasando su objeto Keystone en el estado inicial:
Si bien eso funciona, como puede ver, me veo forzado a coincidir con la forma de la salida de mis reductores generales en general ( https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d ) Advertencias de la consola, etc.
Podría ser extremadamente perezoso al lidiar con esto, pero tratar de limitar tener que actualizar otro dato cuando agrego / cambio cualquier cosa relacionada con los reductores (agregue un reductor, cómo se componen, etc.).
Me doy cuenta de que podría tener que hacerlo para obtener este estado inicial en los reductores correctamente.
Actualmente estoy digiriendo cómo ( https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L25 ) maneja su estado inicial.
Realmente apreciaría algunos comentarios sobre las prácticas "mejores" y "del mundo real" que funcionan para otros.
No entiendo completamente la pregunta pero haré mi mejor esfuerzo para responder.
En componentDidMount () estoy enviando acciones que "reciben" y manejan los diversos datos. (Estos métodos de "recepción" se utilizan cuando se procesan estos bits de datos cuando se obtienen de forma asíncrona a través de una acción de solicitud, y los estoy reutilizando aquí ya que ya tengo los datos).
Este es un mal lugar para despacharlos. Si elige enviar acciones en lugar de producir el estado inicial directamente, hágalo antes de renderizar . En otras palabras, ¡hazlo justo después de crear la tienda! De esta manera no se procesa el estado inicial en blanco.
Si bien eso funciona, como puede ver, me veo forzado a coincidir con la forma de la salida de mis reductores generales en general ( https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d ) Advertencias de la consola, etc.
Se supone que no debes crear el objeto initialState manualmente. Se supone que debe crear un almacén de Redux en el servidor, dispatch acciones para el llenado previo de datos y, cuando esté listo, llamar a store.getState() para recuperar el estado que desea transmitir al cliente. En el cliente, lo leería desde una variable global y crearía la instancia de la tienda del cliente con él. En otras palabras, nunca tiene que crear manualmente el initialState inicial: se supone que debe capturarlo en el servidor con store.getState() , pasarlo al cliente y crear un almacén con él.
Por lo tanto no entiendo el problema que describen. Si cambian los nombres de su reductor o el anidamiento, también cambiará en el servidor. No hay nada que deba hacer para "arreglarlo"; si usa Redux tanto en el cliente como en el servidor, su estructura de estado coincidirá.
Realmente apreciaría algunos comentarios sobre las prácticas "mejores" y "del mundo real" que funcionan para otros.
Si usa Redux en el servidor, rellene previamente la tienda como se describe anteriormente y pase su estado al cliente. En este caso, debe utilizar el argumento
createStore()decreateStore().Si, por algún motivo, no usa Redux en el servidor, pero desea completar los datos de todos modos (por ejemplo, tal vez use otro que no sea Nodo), el enfoque con las acciones de envío es su próxima mejor opción porque no requiere su backend. Conozca la forma del estado. En este caso, debe pasar esas acciones como JSON al cliente, y
dispatch()todas ellas justo después de crear la tienda.