CODEWITHSUNDEEP
reactjsreduxreact-redux
sourabh devpura
sourabh devpura

Reputation: 93

connect is not working and not re-rendering in react-redux

I am working on a react project and in this project, I created a single redux store with multiple reducers

import { createStore, combineReducers } from "redux"
import HsPageDataReducer from "../reducers/HsPageDataReducer.jsx"
import HsUserDataReducer from "../reducers/HsUserDataReducer.jsx"

export default function HsGlobalStore() {
    return createStore(combineReducers({
        PageDataReducer: HsPageDataReducer,
        UserDataReducer: HsUserDataReducer
    }));
}

I am using connect function to provide state to the components

const mapStateToProps = function myMapStateToProps(state) {
    return {
        page_display_name: state.PageDataReducer.page.page_data.page_display_name,
        page_name: state.PageDataReducer.page.page_data.page_name
    }
}

const NewHsPageHadNameIdAreaBox = connect(mapStateToProps)(HsPageHadNameIdAreaBox);


const id = "page_had_name_id_area_box";

if (document.getElementById(id) !== null) {
    ReactDOM.render(<Provider store={HsGlobalStore()}> <NewHsPageHadNameIdAreaBox />  </Provider>, document.getElementById(id));
}

export default NewHsPageHadNameIdAreaBox;

and this is my action handler in HsPageDataReducer

        const initialState = {
            page : HsPageDataObj()
        }
        
        
        export default function HsPageDataReducer(state = initialState, action) {
    try {
        switch (action.type) {
            case HsPageDataActionConst.GET_PAGE_FULL_DATA_BY_PAGE_NAME:
                return new HsPageGetPageFullDataAction().getData(action.pageName, state)
                    .then((newState) => { console.log(newState.page.page_data.page_display_name);  return newState }).catch((newState) => { return state});
            default:
                return state;
        }
    } catch (e) {
        return state;
    }
}

initially, Everything is working perfectly

Also when I dispatch action from the component

componentDidMount() {
        this.goForGetPageData();
    }

    goForGetPageData() {
        this.props.dispatch({
            pageName: "sdevpura5",
            type: HsPageDataActionConst.GET_PAGE_FULL_DATA_BY_PAGE_NAME
        });
    }

It's getting the data

Test Data Image

But not re-rendering the component.

What I am doing wrong?

Upvotes: 0

Views: 86

Answers (2)

gdh
gdh

Reputation: 13682

Reducers should be pure functions and you are making api calls there :)

You need to use middlewares like redux-thunk or redux-saga.

Read some info here and check this and this codesandbox example

Upvotes: 0

Satya Rajbhar
Satya Rajbhar

Reputation: 21

try below code maybe it will help.Because i re-rendering my component using this

    resetPage() {
     ReactDOM.unmountComponentAtNode(document.getElementById('addVitalSettingComponentId'));
     AddVitalSettingComponent = ReactDOM.render(
      <AddVitalSettingComponent />, document.getElementById('addVitalSettingComponentId')
     );
}

Upvotes: 0

Related Questions