We will learn how to start a Redux app with a previously persisted state, and how it merges with the initial state specified by the reducers.

The initial state of store is defined by the rootReducers:

const todoApp = combineReducers({
todos,
visibilityFilter,
});

And we use 'todoApp' to create store:

const store = createStore(todoApp);

So the initial state should be default value of each reducer's state:

const todos = (state = [], action) => { ...

const visibilityFilter = (state = 'SHOW_ALL', action) => { ...

If we want to show some persosted data as initial state, we can pass the persisted data as a second args to 'createStore()' function:

const persistedState = {
todos: [
{
id: 0,
text: "Redux",
completed: false
}
]
}; const store = createStore(todoApp, persistedState);

So the rules are:

  • If there is persisted data you want to display, use this second args, otherwise use ES6 default param
  • Once persisted data is passed in, it will overwrite the default params.

[Redux] Supplying the Initial State的更多相关文章

  1. [Functional Programming + React] Provide a reasonable default value for mapStateToProps in case initial state is undefined

    For example we have a component, it needs to call 'react-redux' connect function. import { compose, ...

  2. [Redux] Accessing Dispatch and State with Redux -- connect

    If you have props and actions, you want one component to access those props and actions, one solutio ...

  3. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  4. [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer

    With a well defined demarcation point between Redux and our State ADT based model, hooking up to a R ...

  5. [Functional Programming ADT] Initialize Redux Application State Using The State ADT

    Not only will we need to give our initial state to a Redux store, we will also need to be able to re ...

  6. 前端(十一):props、state及redux关系梳理

    所谓状态机,是一种抽象的数据模型,是“事物发展的趋势”,其原理是事件驱动.广泛地讲,世界万物都是状态机. 一.状态机是一种抽象的数据模型 在react中,props和state都可以用来传递数据.这里 ...

  7. [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application

    With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a ...

  8. [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT

    By using the State ADT to define how our application state transitions over time, we clear up the ne ...

  9. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

随机推荐

  1. PHP实现中文字串截取无乱码的方法

    直接使用PHP函数substr截取中文字符可能会出现乱码,主要是substr可能硬生生的将一个中文字符“锯”成两半.解决办法: 1.使用mbstring扩展库的mb_substr截取就不会出现乱码了. ...

  2. mysql的查询缓存模式介绍

    mysql的查询缓存 查询是数据库技术中最常用的操作.查询操作的过程比较简单,首先从客户端发出查询的SQL语句,数据库服务端在接收到由客户端发来的 SQL语句后, 执行这条SQL语句,然后将查询到的结 ...

  3. Python自动化运维之1、Python入门

    Python简介 python是吉多·范罗苏姆发明的一种面向对象的脚本语言,可能有些人不知道面向对象和脚本具体是什么意思,但是对于一个初学者来说,现在并不需要明白.大家都知道,当下全栈工程师的概念很火 ...

  4. WPF Window对象

    户通过窗口与 Windows Presentation Foundation (WPF) 独立应用程序进行交互.窗口的主要用途是承载可视化数据并使用户可以与数据进行交互的内容.独立 WPF 应用程序使 ...

  5. 【 UVALive - 4287】Proving Equivalences (SCC缩点)

    题意: 给出N个命题,要求你证明这N个命题的等价性 比如有4个命题a,b,c,d,我们证明a<->b, b<->c,c<->d,每次证明都是双向的,因此一共用了6次 ...

  6. spring 动态数据源

    1.动态数据源:  在一个项目中,有时候需要用到多个数据库,比如读写分离,数据库的分布式存储等等,这时我们要在项目中配置多个数据库. 2.原理:   (1).spring 单数据源获取数据连接过程: ...

  7. mysql表分区、查看分区

    原文地址:http://blog.csdn.net/feihong247/article/details/7885199 一.       mysql分区简介 数据库分区 数据库分区是一种物理数据库设 ...

  8. 利用ROWID 快速更新单表记录

    -----对于普通表 实现: UPDATE T_PM_DEPOSIT_HIS b SET flag = SUBSTR( flag, 1, 8 )||'4'|| CASE WHEN term <= ...

  9. EntityFramework 异常 -- An entity object cannot be referenced by multiple instances of IEntityChangeTracker

    问题      在调用 DbSet 的 Attach()  方法时(与将 Entity 设置为 EntityState.Unchanged 状态等价)报告以下错误:      An entity ob ...

  10. nodejs之日志管理

    开发一个项目时,可以通过控制台输出或者debug来获取到项目的运行信息.当项目上线时,我们就需要通过日志来分析.如同Java的log4j,nodejs中也有相关的log4js.使用过log4j的同学应 ...