0

I want my components to re-render everytime I call 'state.set(...)', even if the values doesn't change.

So hey guys, i have this reducer, which is called everytime screen is resized:

import Immutable from 'immutable';

const initialState = Immutable.fromJS({
  width: ''
});     

 export default (state=initialState, action) => {
        switch(action.type){    
          case "SCREEN_RESIZE":            
            if(action.payload >= 768){
              return state.set('width', 'big');
            }
            else{
              return state.set('width', 'small');
            }    
          default:
          break;
      }
      return state;
    }

I'm using ImmutableJS along with redux, so my store is a map (entire store) of maps (each reducer).

The problem is that my components only re-renders when we change 'width' from 'big' to 'small', or from 'small' to 'big', that is, when value changes!

I want it to re-render even when I set width from 'big' to 'big' or from 'small' to 'small'.

Am I making any mistake?

This is my rootReducer

import { combineReducers } from 'redux-immutable';

import reducer1 from './reducer1_reducer';
import reducer2 from './reducer2_reducer';
import reducer3 from './reducer3_reducer';
import screenSize from './screenSize_reducer';
import reducer5 from './reducer5_reducer';
import rounting from './routerReducer';


const rootReducer = combineReducers({
  reducer1,
  reducer2,
  reducer3,
  screenSize,
  reducer5,
  routing
});

export default rootReducer;
Amanda Siqueira
  • 75
  • 1
  • 2
  • 7
  • In React, rendering is coupled tightly to state changes. Any particular reason you want to render despite the state remaining the same? Are you trying to re-render due to change in viewport/screen size? – warriorpostman Apr 12 '17 at 22:01
  • exactly. there's a component that, when rendering, calculates it dimensions according to window size. so if it not re-renders, it remains the same. – Amanda Siqueira Apr 12 '17 at 22:06
  • 1
    Set the value of the width in your reducer and use a selector for computing `big`/`small`. It's never a good idea to keep derivative data in the state of the redux store. – Josep Apr 13 '17 at 04:24

1 Answers1

0

If you want to re-render on each screen-resizing, you're probably going to want to make the props of the component have the actual screen dimensions, like so: 

<MyRerenderableComp width={this.props.screenWidth} height={this.props.screenHeight} />

You're question is somewhat similar to this post: Reactjs - Rerender on browser resize

Hope that helps?

Community
  • 1
  • 1
warriorpostman
  • 2,268
  • 2
  • 16
  • 26