Why Redux doesn't re-render component?

Question

I have a component with componentDidMount() method which gets info from server like this:

componentDidMount() {
    this.getAccount();
}

getAccount = async () => {
    try {
        this.res = await API.get(`account`, {});
        this.props.setData(this.res.data);
    } catch (err) {
        this.props.history.push(`/add`);
    }
}

And I have a reducer which store the info:

const initialState = {}

const accountReducer = (state = initialState, action) => {
    if (action.type === 'SET_ACCOUNT_DATA') {
        return action.data;
    } else {
        return state;
    }
}

export default accountReducer;

But my component doesn't re-render after action performed. Why? My action code is:

export const setData = (data) => {
    return {
        type: 'SET_ACCOUNT_DATA',
        data
    }
}

Please help, what am I doing wrong?

UPDATE: My map methods are:

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => {
    return {
        setData: (data) => {
            return dispatch(setData(data));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Account);

Mu action import is correct. Checked.

Answer 1

1. In your reducer you probably want to copy origin state and add your changes to it so I think that your reducer should probably looks like:

   const accountReducer = (state = initialState, action) => {
     if (action.type === 'SET_ACCOUNT_DATA') {
       return {...state, data: action.data};
     } else {
       return state;
     }
   }
   

2. If your component has mapStateToProps(), which is returning empty object then the component is not going to re-render if there is no props/state change... Your mapStateToProps() method should maybe look like:

   const mapStateToProps = state => ({
     data: state.yourReducer.yourDataFromStore
   })
   

Answer 2

did you check by putting console.log('state:::',state); inside mapStateToProps() ? Is it called again? also can you try this

const accountReducer = (state = initialState, action) => {
    if (action.type === 'SET_ACCOUNT_DATA') {
        return Object.assign({}, state, {...state, data:action.data });
    } else {
        return state;
    }
}

and in your mapStateToProps

const mapStateToProps = (state)=>({
  data: state.reducername.data
})