redux 为什么页面刷新后 store 被重置了？

问题描述

问 题

最近在用 redux + react-router-redux 写博客，有两个页面 HOME 和 DETAIL，HOME 页面初始化时会加载数据，切换到 DETAIL 时直接从 store 取数据渲染，第一次渲染是正确的，但是再刷新一遍发现状态被重置了。在 redux-devtool 中看到重新触发 @@INIT 动作。

路由代码

const routes = browserHistory => (
  <Router history={browserHistory}>
    <Route path="/" component={Home} />
    <Route path="/detail/:id" component={Detail} />
  </Router>
);

HOME 页面代码

class Home extends Component {
  render() {
    const homeClass = classNames({
      homeView: true,
    });
    return (
      <div className={styles[homeClass]}>
        <PreviewList
          {...this.props.list}
          {...this.props.actions}
          push={this.props.push}
        />
      </div>
    );
  }
}

export default connect(state => {
  return {
    list: state.home.list,
  };
}, dispatch => {
  return {
    push: bindActionCreators(push, dispatch),
    actions: bindActionCreators(actions, dispatch),
  };
})(Home);

DETAIL 页面代码

class Detail extends Component {
  render() {
    return (
      <Article {...this.props.article} />
    );
  }
}

export default connect((state, ownProps) => {
  return {
    article: getArticle(state.home.list.articleList, ownProps.params.id),
  };
})(Detail);

解决方案

正常，store 的数据不能持久化。

把数据本地化

重新 Fetch
...

这篇关于redux 为什么页面刷新后 store 被重置了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！