React component not refreshing when redux state has been updated with successful action

react component not 're rendering on redux state change
redux state not updating immediately
mapstatetoprops not updating props
redux selector not updating
mapstatetoprops not called when state changes
redux update state object
component not re rendering on props change
update redux store from component

New to React/Redux combo and trying to work through an issue.

When a user first visits or logs in / a fetch_user api request is made. The intention is that the page would display differently based on their login status. In redux dev tools I can see the state being updated and fields being populated to 'auth' after the initial state, however, while I am in a subcomponent of the app the value is seen as undefined. Please let me know if you need any more information. Thanks in advance.

    // app.js
            const initialState = {};
    const history = createHistory();
    const store = configureStore(initialState, history);

    const MOUNT_NODE = document.getElementById('app');

    const render = messages => {
      ReactDOM.render(
        <Provider store={store}>
          <LanguageProvider messages={messages}>
            <ConnectedRouter history={history}>
              <App />
            </ConnectedRouter>
          </LanguageProvider>
        </Provider>,
        MOUNT_NODE,
      );
    };

    // index.js
            class App extends React.Component {
      componentDidMount() {
        console.log('here');
        this.props.fetchUser();
      }
      render() {
        return (
          <ThemeWrapper>
            <AppContext.Consumer>
          ..... 
        App.propTypes = {
            fetchUser: PropTypes.any.isRequired
        };

   export default withRouter(connect(null, actions)(App));


  import { FETCH_USER } from '../actions/types';

  export default function (state = null, action) {
    switch (action.type) {
      case FETCH_USER:
        console.log('1');
        return action.payload || false;
      default:
        return state;
    }
  }
    // actions
    export const fetchUser = () => async dispatch => {
      const res = await axios.get('/api/current_user');
      // res is the output of the axios request
      dispatch({ type: FETCH_USER, payload: res.data });
    };

// Banner.js - auth = undefined
render() {
    console.log(this.props);
// === auth = undefined. I may be accessing it incorrectly


const mapStateToProps = state => ({
    gradient: state.getIn([reducerUI, 'gradient']),
    chat: state.getIn([chatUI, 'chatSelected']),
    auth: state.auth
  });

  const BannerMaped = connect(
    mapStateToProps,
  )(Banner);

  // configure store

      export default function configureStore(initialState = {}, history) {
        // Create the store with two middlewares
        // 1. sagaMiddleware: Makes redux-sagas work
        // 2. routerMiddleware: Syncs the location/URL path to the state
        const middlewares = [sagaMiddleware, routerMiddleware(history), reduxThunk];

        const enhancers = [applyMiddleware(...middlewares)];

        // If Redux DevTools Extension is installed use it, otherwise use Redux compose
        /* eslint-disable no-underscore-dangle, indent */
        const composeEnhancers =
          process.env.NODE_ENV !== 'production' &&
          typeof window === 'object' &&
          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
            ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
                // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
                // Prevent recomputing reducers for `replaceReducer`
                shouldHotReload: false,
              })
            : compose;
        /* eslint-enable */
        const store = createStore(
          createReducer(),
          fromJS(initialState),
          composeEnhancers(...enhancers),
        );

        // Extensions
        store.runSaga = sagaMiddleware.run;
        store.injectedReducers = {}; // Reducer registry
        store.injectedSagas = {}; // Saga registry

        // Make reducers hot reloadable, see http://mxs.is/googmo
        if (module.hot) {
          module.hot.accept('./reducers', () => {
            store.replaceReducer(createReducer(store.injectedReducers));
          });
        }

        return store;
      }

Redux store updates are mapped to individual components and not the whole app.

This line means, only the Banner component will be re-rendered when the store is updated and not your entire app.

const BannerMaped = connect(
  mapStateToProps,
)(Banner);

So wherever your Banner component is, every time fetchUser() response succeeds and updates the store, only your Banner component will be re-rendered. If you need to re-render other components, they should also subscribe to store with corresponding mapStateToProps.

Components not re-rendering with connect() · Issue #585 · reduxjs , Container and components not re-rendering upon successful action dispatch #​1159 reducer not updating component hydrotik/node-hapi-react-redux-sass- Otherwise one has to create dozens of container components for every that just happens to be the same shape as the previous state should be  If you mutate the data then the reference will be the same - even though the data is changed - and Redux will not see that the state has changed. When Redux cannot see that the state has changed, it will not update the React components with new data from the state. How to avoid bugs with immutable data

You also need to pass dispatch actions in connect method. In your case, you have already make fetchUser() action. So, you can pass it in your connect method like this:

const BannerMaped = connect(
  mapStateToProps,
  fetchUser
)(Banner);  

I think this will help.

Container and components not re-rendering upon successful action , I've looked at #585 reduxjs/react-redux#12 but can't seem to make my code work. By console.log and redux devtools I can see that my state is successfully updated but there is no /successful-dispatch-does-not-cause-re-render-even-thought-​state-has-been-changed Reload to refresh your session. Meaning, that if the reducer is getting a state object passed in as a parameter, and it has to return that same state plus the changes Why not allow the reducer to only return the changes and have the place where reducers are called from do the merge of the data returned by the reducer into the state? It would break reducer composition.

I was doing everything correctly just not accessing the state object appropriately. Stared at this one a little too long.

const mapStateToProps = state => ({
gradient: state.getIn([reducerUI, 'gradient']),
chat: state.getIn([chatUI, 'chatSelected']),
auth: state.getIn(['auth'])

});

My redux store updates but react view doesn't - JavaScript, Here are my actions and I use react-redux to connect redux with react the redux is connected with react successfully and the LOAD_ALL_POSTS action is working You're going to have to tell us exactly how to duplicate the problem (​and Is the component recieving the new props and not responding? I've looked at #585 reduxjs/react-redux#12 but can't seem to make my code work. By console.log and redux devtools I can see that my state is successfully updated but there is no fresh render the reducer var date = moment() function handl

Will a stateless component re-render if its props have not changed , simply create a class and then place multiple instances of that class wherever we want. One of the most common reasons that your components might not be re-rendering is that you're modifying the existing state in your reducer instead of returning a new copy of state with the necessary changes (check out the Troubleshooting section).

An intro to Redux and how state is updated in a Redux application, In Redux all changes to the application state happen via an "action. was successful you could simply dispatch the 'LOGIN_SUCCEEDED' action Again, think of them as news stories: they don't tell you how to react, they I like this because it's self-descriptive, but to be clear, you do not have to follow this convention. The expected behavior is that my component will be updated when the redux store is updated. This works as intended if I switch to using react-redux 5.1.1, but does not work when I use version 6.0.0. Even if I call this.forceUpdate(); in my component, it does not get the new data from the redux store.

Implementing React Component Lifecycle methods [Tutorial], Why oh why doesn't that React component update? You have When an action has been dispatched, Redux checks if the state has changed or not. If it has not  I've followed the tutorial so far and I have to admit that, albeit the Flux/Redux architecture has a steep learning curve, I managed to successfully make almost everything work very quickly and understanding all the fundamental things. However, the component I'm rendering is not updating when an action is dispatched. I want to add elements to a

Comments
  • Thank you for the speedy response. I do understand that. I suppose my concern is that I may be trying to access 'auth' incorrectly. It is undefined in any combination I try to access it. I have been staring at this for a little while now and may be missing something simple.
  • I am trying to display different buttons in the banner based off what auth equals
  • Can you add the code where you are trying to access auth prop? @JohnZ
  • // Banner - auth = undefined const mapStateToProps = state => ({ gradient: state.getIn([reducerUI, 'gradient']), chat: state.getIn([chatUI, 'chatSelected']), auth: state.auth }); const BannerMaped = connect( mapStateToProps, )(Banner); - Posted above - I am just console logging this.props and I see Object auth: undefined chat: 0.. etc. Thank you
  • Add the code for Banner component. It might help.
  • Interesting. So I have fetchUser run from my index.js - and ending with export default withRouter(connect(null, actions)(App)); Would I go through the efforts of loading all of the actions aka fetchUser? I am confused