[英]React redux - store isn't loaded but no errors
I am following the code example from Learning React book. 我正在学习Learning React书中的代码示例 。 It is about react redux and react router used for single page app.
这是关于用于单页面应用程序的React Redux和React Router。
Here is the link to my project where I mimic the example above. 这是我的项目的链接 ,在这里我模仿了上面的示例。 You can clone it and run with
npm install
and npm run dev
. 您可以克隆它并使用
npm install
和npm run dev
。 (Note: project also has back end code but it is irrelevant. Question is only about front end part where I use static data file.) (注意:项目也有后端代码,但是无关紧要。问题仅与使用静态数据文件的前端部分有关。)
I can successfully run the example locally, but when I run my project I see my store being empty when it comes to load ui components. 我可以在本地成功运行该示例,但是当我运行项目时,看到加载ui组件时,我的商店为空。 I don't get any compile or console errors, and I see other parts of the app working fine.
我没有任何编译或控制台错误,并且我看到应用程序的其他部分工作正常。 I spent lots of time debugging store creation code but I can't figure out why it doesn't work.
我花了很多时间调试商店创建代码,但我不知道为什么它不起作用。 Please help to find the reason.
请帮助查找原因。
Here are my findings: 这是我的发现:
There are two url available in my project: /
and /cars
. 我的项目中有两个网址:
/
和/cars
。 The /cars
url reads data file directly and it does output all the data correctly. /cars
网址直接读取数据文件,并且确实正确输出了所有数据。
The root url suppose to do the same by utilizing redux store. 根URL假设通过利用redux存储执行相同的操作。 However the data array used by ui component comes empty.
但是,ui组件使用的数据数组为空。 I guess there is something wrong with the code for store creation (below), although I precisely mimicked the code example.
我猜商店创建的代码有问题(下),尽管我精确地模仿了代码示例。 There is literally only one change that I made which is
carsReducer
, and I coded it exactly as other reducers in the example. 实际上,我所做的只有一个更改是
carsReducer
,并且与示例中的其他reducer完全一样进行了编码。
I also noticed that localStorage
isn't being populated in the console, but it doesn't give much clue. 我还注意到控制台中没有填充
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
)
Try having a constructor and initialize your Store
on /car-saver/src/main/resources/static/js/index.js
尝试使用构造函数并在
/car-saver/src/main/resources/static/js/index.js
上初始化Store
constructor(props) {
super(props);
this.store = configureStore();
}
and pass it to your <Provider store={this.store}>
并将其传递给您的
<Provider store={this.store}>
I can recommend you some fixes: 我可以向您推荐一些修复方法:
js/index.js — Main provider file 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 — Store file 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 — And some fixes to cars list JSX structure 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.