2

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);
9
  • You set the hasAuth prop for Screen to be state.auth.hasAuth, but in your reducer you seem to update state.hasAuth, not state.auth.hasAuth. Commented Feb 10, 2019 at 22:53
  • Is this your only reducer? If not how does your combineReducers look like? Commented Feb 10, 2019 at 22:56
  • 1
    @Tholle the auth is actually my reducer name. I'm using combineReducers so it nests it one layer deep using the name as the property. I have access to hasAuth in my component, it just isn't showing the changes unless the component is remounted or I forceUpdate(). Commented Feb 10, 2019 at 22:58
  • @GeraltDieSocke updated the question with my root reducer in there. I removed any non-relevant reducers. Commented Feb 10, 2019 at 23:02
  • 1
    I'm not sure if the redux is actualy correctly wired up like this. What if you wire batchedSubscribe up like shown in the docs: github.com/tappleby/redux-batched-subscribe Is it working then? Commented Feb 10, 2019 at 23:07

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.