Question

我正在关注Learning React书中的code example。它是关于react redux和反应路由器用于单页应用程序。

以下是我项目的link，我模仿上面的示例。您可以克隆它并使用public void foo(BaseEntity entity ) { baseRepository.save(entity); ... ... }和npm install运行。（注意：项目也有后端代码但不相关。问题只是关于我使用静态数据文件的前端部分。）

我可以在本地成功运行该示例，但是当我运行我的项目时，我看到我的存储在加载ui组件时是空的。我没有得到任何编译或控制台错误，我看到应用程序的其他部分工作正常。我花了很多时间调试商店创建代码，但我无法弄清楚它为什么不起作用。请帮忙找出原因。

以下是我的发现：

我的项目中有两个网址：npm run dev和/。 /cars url直接读取数据文件，它会正确输出所有数据。

根网址假设通过使用redux存储来做同样的事情。但是，ui组件使用的数据数组是空的。我猜商店创建代码存在问题（下图），尽管我精确地模仿了代码示例。我实际上只有一个变化是/cars，我在示例中将其编码为其他缩减器。

我还注意到carsReducer并未在控制台中填充，但它并没有提供太多线索。

localStorage

Answer 1

尝试使用构造函数并在$headers .= "Content-Type: text/html; charset=UTF-8\r\n";

上初始化Store

/car-saver/src/main/resources/static/js/index.js

并将其传递给您的constructor(props) { super(props); this.store = configureStore(); }

Answer 2

我可以向您推荐一些修复：

js / index.js - 主要提供商文件

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 - 存储文件

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 - 并对汽车列表JSX结构进行了一些修复

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

React redux - 存储没有加载但没有错误

2 个答案: