javascript - Why Redux doesn't re-render component? - Stack Overflow

I have a ponent with ponentDidMount() method which gets info from server like this:

ponentDidMount() {
    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 ponent 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.

I have a ponent with ponentDidMount() method which gets info from server like this:

ponentDidMount() {
    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 ponent 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.

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Nov 30, 2018 at 9:39 Nastro asked Nov 30, 2018 at 9:31 NastroNastro 1,76988 gold badges2424 silver badges4242 bronze badges 11

• can you post how you connect the ponent? (and make sure you are using it with a proper import) – Sagiv b.g Commented Nov 30, 2018 at 9:34
• reducer and container are connected each other? – Julian Commented Nov 30, 2018 at 9:35
• @Solo if the OP is passing mapDispatchToProps in the connect (react-redux) then the dispatch is implicitly injected. but we do need to see how the OP is using connect. if any – Sagiv b.g Commented Nov 30, 2018 at 9:37
• What properties do you have in the state? Is it identical to action.data only? Or is the account data a property in your state only? – weibenfalk Commented Nov 30, 2018 at 9:39
• 3 You are not binding any values in mapStateToProps, so there are no changes – Davin Tryon Commented Nov 30, 2018 at 9:42

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 4

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 ponent has mapStateToProps(), which is returning empty object then the ponent 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
   })
   

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
})