Blocks hot module reloading

[pke]

Somehow, as soon as a component is connected to redux-ui it no longer displays changes in code done via hot-reloading. The same component worked just fine without ui connected to it before.

[tonyhb]

:+1: Thanks for reporting. This will be patched in an upcoming release.

[keithriver]

Hot updates seem to work fine if you don't pass the key to the decorators. Not sure if there are other conditions. Using: "react": "^15.5.4", "redux": "^3.6.0", "redux-ui": "^0.1.1", "react-hot-loader": "^3.0.0-beta.7", "react-css-modules": "^4.1.0", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.2", webpack.NamedModulesPlugin()

[robertsonmcclure]

Same issue with HMR. This is an example of how I'm using redux-ui.

import React, { Component } from "react"
import { bindActionCreators } from "redux"
import { connect } from "react-redux"
import ui from "redux-ui"
import * as reduxActions from "../actions/todos"
import TodoList from "../components/TodoList"
import { createSelector } from "reselect"
import { loadingReducer } from "../reducers/todos"
import { SHOW_ALL, SHOW_COMPLETE, SHOW_INCOMPLETE } from "../constants"

export class TodoListContainer extends Component {
    componentDidMount = () => this.props.fetchTodos()
    render = () =>
        this.props.ui.isLoading
            ? <p>Loading initial todos from server ... </p>
            : <TodoList {...this.props} />
}

export const mapStateToProps = state => ({
    todos: filteredTodosSelector(state),
    filter: state.data.todoList.filter,
    isLoading: state.data.todoList.isLoading
})

export const mapDispatchToProps = dispatch => bindActionCreators(reduxActions, dispatch)

const uiConfig = {
    key: "todoList",
    state: { filter: SHOW_ALL, isLoading: false },
    reducer: loadingReducer
}

export default ui(uiConfig)(connect(mapStateToProps, mapDispatchToProps)(TodoListContainer))

export const filteredTodosSelector = createSelector(
    [state => state.data.todoList, state => state.ui.get("todoList").get("filter")],
    (todos, filter) => {
        switch (filter) {
            case SHOW_ALL:
                return todos
            case SHOW_COMPLETE:
                return todos.filter(item => item.get("complete"))
            case SHOW_INCOMPLETE:
                return todos.filter(item => !item.get("complete"))
            default:
                return todos
        }
    }
)