Więc od jednego dnia próbuję to rozgryźć.

Myślę, że wszystko ustawiłem poprawnie, jednak widok nie renderuje się ponownie ani nie aktualizuje rekwizytów. Widzę jednak zmianę w narzędziach Redux Developer. Wiem, że w Stackoverflow są inne takie pytania, ale żadne z nich tak naprawdę mi nie pomaga.

Czy ja czegoś nie widzę?

// 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);

Dzienniki z narzędzi programistycznych React Redux

Czy ktoś mógłby mi pomóc? Nie mogę dowiedzieć się, co jest nie tak. Zrezygnowałem z większości rzeczy, które nie są związane z moim problemem (przynajmniej nie sądzę). Mogę przesłać całe repozytorium do github, aby zobaczyć szerszy kontekst

0
Ali Gasimzade 20 marzec 2020, 23:56

2 odpowiedzi

Najlepsza odpowiedź

Twój reduktor musi zwrócić nowy stan, w przeciwnym razie stan pozostanie niezmieniony:

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

    return state;
}
2
elyalvarado 20 marzec 2020, 21:07

Myślę, że musisz zaimplementować coś takiego:

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

Dzieje się tak, ponieważ musisz wykonać dispatch działań w sklepie

0
Eduardo ML 20 marzec 2020, 21:09