Реакция Redux не повторяется при изменении Store

Question

Итак, я пытался выяснить это уже целый день.

Я думаю, что все настроил правильно, однако представление не рендерится повторно и не обновляет реквизиты. Тем не менее, я вижу изменения в инструментах Redux Developer. Я знаю, что в Stackoverflow есть и другие подобные вопросы, но ни один из них мне не очень помогает.

Я что-то не вижу?

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

Логи из React Redux Developer Tools

Может кто-нибудь помочь мне? Я не могу понять, что здесь не так. Я пропустил большинство вещей, которые я не связан с моей проблемой (по крайней мере, я так не думаю). Я могу загрузить весь репозиторий в github, чтобы увидеть более широкий контекст

Answer 1

Ваш редуктор должен вернуть новое состояние, в противном случае состояние остается неизменным:

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

    return state;
}

Answer 2

Я думаю, вам нужно реализовать что-то вроде:

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

Это потому, что вам нужно dispatch действий в магазине