无法使用redux获得持久化状态的值-在存储再水化后持久化
无法使用redux获得持久化状态的值-在存储再水化后持久化
提问于 2017-10-04 03:35:47
因此，假设我有一个Home组件，它只执行api调用，从服务器获取所有的本地工作：
import React, { Component } from 'react';
import { fetchHomeWorks } from '../actions';
import HomeWorkRow from '../component/HomeWorkRow';
class Home extends Component {
componentDidMount() {
this.props.fetchHomeWorks()
}
renderHomeWorks() {
const { home_works, error, loading } = this.props;
if(!error) {
if(!loading){
if(home_works.length >=1) {
return home_works.map(home_work => {
return <HomeworkRow key={uuid()} home_work={home_work} />
})
}
else
return <p className="pt-card col-xs-12 col-xs-offset-1 content"> No Task Yet :)</p>
}
else
return <p>Loading...</p>
}
}
render() {
return (
<Layout>
{ this.props.renderHomeworks() }
</Layout>
);
}
}
const mapStateToProps = ({ home_work, persist }) => {
return {
home_works: home_work.home_works,
persist:
};
};
export default connect(mapStateToProps, { fetchHomeWorks })(Home);当然，在页面刷新时，由于componentDidMount()生命周期的关系，它将执行api调用。现在，我想要更改它并使用persisted数据使用redux-persist，这样它就可以避免在页面刷新时调用api .
我正在使用redux-persist库..。下面是带有redux持久化()的app组件：
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import {
BrowserRouter as Router,
Route,
} from 'react-router-dom';
import { compose, createStore, applyMiddleware } from 'redux';
import {persistStore, autoRehydrate} from 'redux-persist';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers/';
class App extends Component {
render() {
const store = createStore(rootReducer, {}, compose(applyMiddleware(thunk, logger), autoRehydrate()));
persistStore(store);
return (
<Provider store={store}>
<Router>
<div>
<Route exact path="/" component={LoginForm} />
// ... some routes which doesnt matter
</div>
</Router>
</Provider>
);
}
}
export default App;我知道resux持久化是因为redux记录器的缘故。
现在，如何获得持久化状态的值？我尝试了另一个还原剂:从‘./action/type’导入{ persistReducer }；
export default (state = [], action) => {
switch(action.type) {
case PERSIST:
return { ...state, persistState: action.payload }
default:
return state;
}
};并在rootReducer中添加
import { reducer as formReducer } from 'redux-form'
import { combineReducers } from 'redux';
import homeWorkReducer from './userReducer';
import persistReducer from './persistReducer';
export default combineReducers({
home_works: homeWorkReducer,
form: formReducer,
persist: persistReducer
});在我的Home组件中，我使用
componentWillReceiveProps(nextProps) {
if(nextProps.persist.persistState) {
console.log(nextProps.persist.persistState.home_works.home_works)
}
}并正确地获取值：
那么，如何正确地进行呢？
回答 1
Stack Overflow用户
发布于 2017-10-04 04:04:31
侧请注意，但是如果您反转if语句中的逻辑，则可以稍微清理代码：
这是：
renderHomeWorks() {
const { home_works, error, loading } = this.props;
if(!error) {
if(!loading){
if(home_works.length >=1) {
return home_works.map(home_work => {
return <HomeworkRow key={uuid()} home_work={home_work} />
})
}
else
return <p className="pt-card col-xs-12 col-xs-offset-1 content"> No Task Yet :)</p>
}
else
return <p>Loading...</p>
}
}可以成为：
renderHomeWorks() {
const { home_works, error, loading } = this.props;
if (error) return <p>Loading...</p>
if (loading || !home_works) return <p className="pt-card col-xs-12 col-xs-offset-1 content"> No Task Yet :)</p>
return home_works.map(home_work => <HomeworkRow key={uuid()} home_work={home_work} />)
}- 您可以省略只有一个表达式的if语句的
{和}。 0是一个假值，因此home_works.length === 0和!home_works都返回true- 如果函数只返回一个表达式(几乎在所有情况下)，则可以使用带fat箭头
=>语法的隐式返回。
例如，home_works.map(() => something())与home_works.map(() => { return something() })相同。如果它只返回一个JSX元素(例如div或一个组件)，也可以使用JSX。
我刚才向您展示的代码是因为function正在呈现HomeWorks，它首先检查是否存在错误--如果是，则从render函数返回--然后，它检查它是否正在加载，或者home_works是否错误--如果是这样，则从函数返回--最后，它继续并呈现家庭作业行列表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46556612
复制相关文章
相似问题
腾讯云开发者
