CODEWITHSUNDEEP
javascriptreactjsreact-nativeredux
Chris Poe
Chris Poe

Reputation: 808

Redux - Component not re-rendering using connect()

I have a component that needs to hide/show content based on whether the user is logged in or not. My Redux logger is showing the proper state change but the connected component is not re-rendering. At first I figured it was a mutation issue, however after attempting the same thing with immutable.js and redux-starter-kit's createReducer with no success, I figured otherwise.

It's my understanding that when using mapStateToProps the component should re-render the same as if it were local state.

Reducer:

export default (
  state = {
    hasAuth: false,
  },
  action
) => {
  switch (action.type) {
    case AUTH_LOADED:
      return { ...state, hasAuth: true }
    default:
      return state;
  }
};

Component:

class Screen extends PureComponent {
  render() {
    return (
      <Fragment>
        {this.props.hasAuth && <Text>Logged In</Text>}
      </Fragment>
    );
  }
}

export default connect(state => ({
  hasAuth: state.auth.hasAuth,
}))(Screen);

Root Reducer

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { batchedSubscribe } from 'redux-batched-subscribe';
import thunk from 'redux-thunk';
import reduxMulti from 'redux-multi';
import logger from 'redux-logger';

import auth from './reducers/auth';

const rootReducer = combineReducers({
  auth,
});

const createStoreWithMiddleware = applyMiddleware(thunk, reduxMulti, logger)(
  createStore
);

const createStoreWithBatching = batchedSubscribe(fn => fn())(
  createStoreWithMiddleware
);

export default createStoreWithBatching(rootReducer);

Upvotes: 2

Views: 72

Answers (1)

GeraltDieSocke
GeraltDieSocke

Reputation: 1618

You have to wire up Redux in Combination with batchedSubscribe correctly. Here are the docs with a short guide: https://github.com/tappleby/redux-batched-subscribe

Upvotes: 1

Related Questions