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);
hasAuthprop forScreento bestate.auth.hasAuth, but in your reducer you seem to updatestate.hasAuth, notstate.auth.hasAuth.combineReducerslook like?authis actually my reducer name. I'm usingcombineReducersso it nests it one layer deep using the name as the property. I have access tohasAuthin my component, it just isn't showing the changes unless the component is remounted or IforceUpdate().batchedSubscribeup like shown in the docs: github.com/tappleby/redux-batched-subscribe Is it working then?