React Redux-存储未加载但没有错误

Question

我正在学习Learning React书中的代码示例 。 这是关于用于单页面应用程序的React Redux和React Router。

这是我的项目的链接 ，在这里我模仿了上面的示例。 您可以克隆它并使用npm install和npm run dev 。 （注意：项目也有后端代码，但是无关紧要。问题仅与使用静态数据文件的前端部分有关。）

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

这是我的发现：

我的项目中有两个网址： /和/cars 。 /cars网址直接读取数据文件，并且确实正确输出了所有数据。

根URL假设通过利用redux存储执行相同的操作。 但是，ui组件使用的数据数组为空。 我猜商店创建的代码有问题（下），尽管我精确地模仿了代码示例。 实际上，我所做的只有一个更改是carsReducer ，并且与示例中的其他reducer完全一样进行了编码。

我还注意到控制台中没有填充localStorage ，但是并没有太多提示。

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
    )

Answer 1

尝试使用构造函数并在/car-saver/src/main/resources/static/js/index.js上初始化Store

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

并将其传递给您的<Provider store={this.store}>

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