Estoy siguiendo el ejemplo de código de Learning Reaccionar libro. Se trata de react redux y react router utilizado para la aplicación de una sola página.

Aquí está el enlace a mi proyecto donde imito el ejemplo anterior. Puede clonarlo y ejecutarlo con npm install y npm run dev. (Nota: el proyecto también tiene código de back-end, pero es irrelevante. La pregunta es solo sobre la parte de front-end donde uso un archivo de datos estáticos).

Puedo ejecutar con éxito el ejemplo localmente, pero cuando ejecuto mi proyecto veo que mi tienda está vacía cuando se trata de cargar componentes de interfaz de usuario. No obtengo ningún error de compilación o consola, y veo que otras partes de la aplicación funcionan bien. Pasé mucho tiempo depurando el código de creación de tiendas, pero no puedo entender por qué no funciona. Ayude por favor a encontrar el motivo.

Aquí están mis hallazgos:

Hay dos URL disponibles en mi proyecto: / y /cars. La URL /cars lee el archivo de datos directamente y genera todos los datos correctamente.

Se supone que la URL raíz debe hacer lo mismo utilizando la tienda redux. Sin embargo, la matriz de datos utilizada por el componente ui viene vacía. Supongo que hay algo mal con el código para la creación de la tienda (abajo), aunque imité con precisión el ejemplo del código. Literalmente, solo hice un cambio que es carsReducer, y lo codifiqué exactamente como otros reductores en el ejemplo.

También noté que localStorage no se completa en la consola, pero no da mucha pista.

src/main/resources/static/js/store/index.js

const storeFactory = (initialState=stateData) =>
    applyMiddleware(logger, saver)(createStore)(
        combineReducers({carsReducer}),
        (localStorage['redux-store']) ?
            JSON.parse(localStorage['redux-store']) :
            initialState
    )
0
Kurt 18 feb. 2018 a las 10:09

2 respuestas

La mejor respuesta

Puedo recomendarte algunas correcciones:

js / index.js : archivo del proveedor principal

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import App from './components/App'
import 'bootstrap/dist/css/bootstrap.min.css'
import store from './store'

window.React = React
window.store = store

render(
    <Provider store={store}>
        <HashRouter>
            <App />
        </HashRouter>
    </Provider>,
    document.getElementById('react-container')
)

js / store / index.js : archivo de almacenamiento

import { createStore, combineReducers, applyMiddleware } from 'redux'
import {carsReducer} from './reducers'
import stateData from '../../data/cars.json'

let console = window.console

const logger = store => next => action => {
    let result
    console.groupCollapsed("dispatching", action.type)
    console.log('prev state', store.getState())
    console.log('action', action)
    result = next(action)
    console.log('next state', store.getState())
    console.groupEnd()
    return result
}

const saver = store => next => action => {
    let result = next(action)
    localStorage['redux-store'] = JSON.stringify(store.getState())
    return result
}

const initialState = localStorage['redux-store'] || stateData

const store = createStore(
    combineReducers({...carsReducer}),
    stateData,
    applyMiddleware(logger, saver)
)

export default store

CarsTable.js : algunas correcciones en la estructura JSX de la lista de coches

import PropTypes from 'prop-types'
import CarRow from './CarRow'

const CarsTable = ({cars = []}) =>
    <div>
        {(cars.length === 0) ?
            <p>Cars list is empty.</p> :
            <table className="table">
                <thead>
                <tr>
                    <th>Ad name</th>
                    <th>Price</th>
                    <th>Location</th>
                    <th>Odometer</th>
                    <th>Condition</th>
                </tr>
                </thead>
                <tbody>
                {
                    cars.map((car, i) =>
                        <CarRow key={i} car={car} />
                    )
                }
                </tbody>
            </table>
        }
    </div>

CarsTable.propTypes = {
    cars: PropTypes.array
}

export default CarsTable
0
user5699040user5699040 18 feb. 2018 a las 08:08

Intente tener un constructor e inicialice su Store en /car-saver/src/main/resources/static/js/index.js

constructor(props) {
   super(props);
   this.store = configureStore();
}

Y páselo a tu <Provider store={this.store}>

0
Mario Nikolaus 18 feb. 2018 a las 09:05