CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Ali Gasimzade
Ali Gasimzade

Reputation: 43

React Redux not re-rendering when Store changes

So I have been trying to figure this out for a day now.

I think I have set up everything correctly, however, the view does not re-render nor the prop updates. However, I can see the change in Redux Developer tools. I know there are other questions like this on Stackoverflow but none of them really helps me.

Am I not seeing something?

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import Store from './store';
import * as serviceWorker from './serviceWorker';

const store = createStore(Store,  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

ReactDOM.render(
    <Provider store={store} >
        <App />
    </Provider>
    , 
    document.getElementById('root'));

//actions.js
const initPurchases = (payload) => {
    return {
        type: "INITILIZE_PURCHASES",
        payload
    }
}

module.exports = {
    initPurchases,
}

// store.js

const initalState = {
    inventory: [],
}

const rootReducer = (state = initalState, action) => {
    switch(action.type) {
        case "INITILIZE_PURCHASES":
            state.purchases = [...action.payload];
            break;
        default:
            return state;
    }

    return state;
}

export default rootReducer

import React from 'react';
import { connect } from 'react-redux';
import actions from './actions';


class App extends React.Component {
    state = {}

    componentDidMount = () => {
        this.getPurchases();
    }


    getPurchases = async () => {
        // call to api which returns t
        this.props.initPurchases(t)
    }   

    render() {
        console.log(this.props.purchases) // Returns empty array []

        return (
            <div className="App">
                // Some view
            </div>
        );
    }
}

export default connect(
    (state) => {return {purchases: state.purchases}},
    actions,
)(App);

Logs from React Redux Developer Tools

Can somebody please help me? I can't figure out what's wrong here. I ommited most of the things that i are not related to my problem (at least I do not think they are). I can upload the entire repo to github to see the bigger context

Upvotes: 0

Views: 42

Answers (2)

EML
EML

Reputation: 66

I think you need to implement something like:

import actions from './actions'

...

class App extends React.Component {

   ...

   componentDidMount = () => {
        this.props.initPurchases();
   }

   render() {
     ...
   }

}


const mapDispatchToApp = (dispatch) => (
  {
    initPurchases: () => (
      dispatch(actions.initPurchases())
    ),
  }
)

...

export default connect(
    (state) => {return {purchases: state.purchases}},
    mapDispatchToApp,
)(App);

This is because you need to dispatch actions to the store

Upvotes: 0

elyalvarado
elyalvarado

Reputation: 1296

Your reducer needs to return the new state, otherwise the state remains unchanged:

const rootReducer = (state = initalState, action) => {
    switch(action.type) {
        case "INITILIZE_PURCHASES":
            return { ...state, purchases: [...action.payload] };
            break;
        default:
            return state;
    }

    return state;
}

Upvotes: 2

Related Questions