Props undefined || state update not updating props

Hi. I’m pretty new to redux and I’ve been trying to learn and build my project with redux but I’m totally baffled as this boilerplate doesn’t just use Redux but also some other stuff such as Immer and Reselect. (No offense though xD) I have a container where I fetch some data, then that data is put in the store. But the problem is, when I log props, they show me the initial state and therefore there is no re-rendering, yet Redux DevTools is showing me that the states have been updated. Also, I would appreciate if somebody could tell me why I get undefined on get/getIn when I use state.get or state.getIn to retrieve the state in selector and my container. Because I saw some examples in using this code, so maybe this has something to do with my problem!

Here is some portions of my code:

// Blog container (Index.js)
const mapStateToProps = createStructuredSelector({
  title: makeSelectTitle,
  posts: makeSelectBlog,
});

export function mapDispatchToProps(dispatch) {
  return {
    fetchPosts: () => dispatch(getBlogPosts()),
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'blog', reducer });
const withSaga = injectSaga({ key: 'blog', saga });

export default compose(
  withConnect,
  withReducer,
  withSaga,
)(withStyles(styles)(Blog));

// reducer of blog container
export const initialState = {
  title: 'first title',
  posts: {},
};

/* eslint-disable default-case, no-param-reassign */
const blogReducer = (state = initialState, action) =>
  produce(state, draft => {
    // const posts = [...state.posts];
    switch (action.type) {
      case GET_BLOG_POSTS:
        return state;
      case LOADED_BLOG_POSTS:
        return {
          ...state,
          posts: action.posts,
          title: 'new title',
        };
      // break;
      default:
        return state;
    }
  });

// Selector of blog container

const selectBlogPosts = state => state.posts || initialState;
const selectBlogTitle = state => state.title || initialState;

const makeSelectBlog = createSelector(
  selectBlogPosts,
  substate => substate,
  blogState => blogState.posts,
);

const makeSelectTitle = createSelector(
  selectBlogTitle,
  substate => substate,
  blogState => blogState.title,
);

export { selectBlogPosts, selectBlogTitle, makeSelectBlog, makeSelectTitle };

[julienben]

It depends on the size of your app. Reselect is only about helping you with performance (avoiding unnecessary re-renders) but it’s often misused anyway so unless you’re building a huge app with major performance concerns, it’s ok to skip it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.