[Redux + Webpack] Hot reloading Redux Reducers with Webpack
Webpack will hot reload the component, but the reducer we need hard refresh.
To sovle the problem, go to the store.js:
import {createStore, compse} from 'redux';
import {syncHistoryWithStore} from 'react-router-redux';
import {browserHistory} from 'react-router'; // import root reducer
import rootReducer from './reducers/index'; import comments from './data/comments';
import posts from './data/posts'; const defaultState = {
posts,
comments
}; const store = createStore(rootReducer, defaultState); // sync store with url history
export const history = syncHistoryWithStore(browserHistory, store);
if(module.hot){
module.hot.accept('./reducers/', () => {
const nextRootReducer = require('./reducers/index').default;
store.replaceReducer(nextRootReducer);
})
} export default store;
We just need to config the 'reducers' folder to be reloaded
[Redux + Webpack] Hot reloading Redux Reducers with Webpack的更多相关文章
- redux源码解析-redux的架构
redux很小的一个框架,是从flux演变过来的,尽管只有775行,但是它的功能很重要.react要应用于生成环境必须要用flux或者redux,redux是flux的进化产物,优于flux. 而且r ...
- webpack入门和实战(一):webpack配置及技巧
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- webpack学习(一):webpack 介绍&安装&常用命令
一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...
- 【Webpack的使用指南 01】Webpack入门
使用Webpack有一段时间了,但是感觉之前学的用的都比较零散,所以在这里整理一下Webpack的使用知识,从入门到进阶. 创建项目 首先创建最简单的一个项目 npm init 得到以下项目结构: 安 ...
- 【Webpack的使用指南 02】Webpack的常用解决方案
说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- webpack dllPlugin使用(基于vue-cli webpack模板)
由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
随机推荐
- Android ViewPager欢迎页+引导页+进入首页
import android.app.Activity; import android.content.Intent; import android.content.SharedPreferences ...
- visio 改变画布大小
按住键盘Ctrl键,将鼠标箭头移动到画布边界处就可以自由拖动画布大小了.
- cocos2d anchor point 锚点解析
anchor point 究竟是怎么回事? 之所以造成不容易理解的是因为我们平时看待一个图片是 以图片的中心点 这一个维度来决定图片的位置的.而在cocos2d中决定一个 图片的位置是由两个维度 一个 ...
- [Web API] 如何让 Web API 统一回传格式以及例外处理[转]
[Web API] 如何让 Web API 统一回传格式以及例外处理 前言 当我们在开发 Web API 时,一般的情况下每个 API 回传的数据型态或格式都不尽相同,如果你的项目从头到尾都是由你一个 ...
- 设置layoutControl1 中的 控件的 focus
设置 layoutControl1 中的layoutControl EnableAutoTabOrder 为 false; this.layoutControl1.ActiveControl = th ...
- CATALOGUE 目录
1 语言基础 1.1 c/c++ [转]C/C++ 存储类型 作用域 连接类型 [转]C/C++内存划分 [转]C/C++除法实现方式及负数取模详解 [转]为什么C++编译器不能支持对模板的分离式编译 ...
- redis在mac上的安装
mac 上安装 redis 首先必须保证mac 已经安装 xcode. 因为make时要用到 Xcode 的command Tools . (1)下载 redis http://redis.goo ...
- redis的lists类型
List是一个链表结构 , 主要功能是push . pop .获取一个范围的所有值等等 , 操作中key理解为链表的名字 . redis 的 list类型其实就是一个每个子元素都是string类型的双 ...
- Red5点播和直播的实现
(一) Red5流媒体服务器介绍Red5是一个采用Java开发开源的Flash流媒体服务器.它支持:把音频(MP3)和视频(FLV)转换成播放流: 录制客户端播放流(只支持FLV):共享 ...
- hdu 5363 Key Set
http://acm.hdu.edu.cn/showproblem.php?pid=5363 Key Set Time Limit: 2000/1000 MS (Java/Others) Mem ...