Redux: Strange issue cause component to unmount

Created on 2 Jun 2017  路  1Comment  路  Source: reduxjs/redux

I'm sorry to ask this question here, but I have no answer on stackoverflow and discord and I have this issue since some days without found any way to debug it.

Imagine an app with two components and a main entry like :

Components
   App
      Actions.js // import some Module actions
      Reducer.js
      Selectors.js
      Container.jsx

   Module
      Actions.js
      Reducer.js
      Selectors.js
      Container.jsx

Lib
   store.js

main.jsx

When I call a Module action from App, the Module reducer update the state. It's basic redux usage and that work perfectly.

Now the module is moved in a separate package (each built with Webpack). Lerna (an NPN link alternative) is used to bootstrap the module with the app (the module is now a dependancy). The module export 3 things (a container, the reducer and the actions). The imported reducer is "linked" to the "instanced" App store. It's like using a basic NPM lib. The app actions.js is updated to import the module actions like a node_module instead a local component.

Packages
   App
      package.json // "dependencies": { "module": "^1.0.0",
   Module
      package.json
lerna.json
package.json

But with this a structure, when I call the module action, the reducer cause allways the app to unmount (I repeat again the same code work perfectly in the first situation). I have double/triple/infinite check with a simple reducer, I dont understand where is the issue. I have try this differents codes in the Module reducer :

Fail

const initialState = {
  test: null,
  another: 'thing',
};

export default (state = initialState, action) => {
    switch (action.type) {
        case types.TEST:
          return { // App unmount after this
            ...state,
            test: action.payload, // action.payload = 123
          };

        default:
           return state;

Fail

case types.SET_TEST: {

  const t = {
      ...state,
    test: action.payload.theme,
  };

  console.info(t); // { Object { test: 123, another: 'thing' }

  return t; // App unmount after this
}

Fail

case types.TEST:
  return { // App unmount after this
    ...state,
  };

Fail

case types.TEST:
  return { // App unmount after this
    state,
  };

Work (but why ?????)

case types.TEST:
   return state,

Why only the last work ??? Why a basic state return wrapped in a block without any or other changes doesnt work ???

At this time a it's a big mystery

>All comments

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux. Thanks!

Was this page helpful?
0 / 5 - 0 ratings