通過從非反應組件調度操作來更新React組件

Question

當用戶將項目添加到購物車時，我正在嘗試更新項目上的購物車按鈕。

我在React.js中構建了網站的一部分 - 比如購物車，購物車按鈕等。

configureStore.js：

export default function configureStore(initialState) {
      const store = createStore(
        reducers,
        initialState
      return store
    }

行動：

export function updateCart(payload) {
    return {
        type: CART_UPDATE,
        payload: payload
    }
}

減速器：

export default function cart(state = {}, action) {

    switch (action.type) {

            case CART_UPDATE:

            const   cart = {
                        data: action.payload.cart,
                        errors: action.payload.errors,
                        isFetching: false
                    };

            return {
                ...state,
                ...cart
            };

    return state;
}

CartButton.js

... componnent etc.

function mapStateToProps(state) {
    return {
        cart: state.cart.data
    };
}

export default connect(mapStateToProps)(CartButton);

提供商

import configureStore from './store/configureStore'
var store = configureStore();

ReactDOM.render((<Provider store={store}><Cart showControls={true} /></Provider>), document.getElementById('react-cart'));

我正在調度一個應該從非反應組件更新購物車數量的操作，如下所示：

// imports 
import { dispatch } from 'redux';
import { updateCart } from '../../actions/cart_actions';
import configureStore from '../../store/configureStore'
var store = configureStore();

接着..

store.dispatch(updateCart(response));

調度操作並更新狀態 。 推車按鈕組件通過連接。 react-redux connect（）函數。 但不知何故，它沒有使用新數量更新組件。

當我從我的購物車React組件中發出一個動作時，它工作正常。

我可能會遺漏一些明顯的東西。 有什么建議么？

Answer 1

所以我最終弄清楚的是，你不應該在多個地方定義你的商店。

我只是從我的root app.js文件中導入了商店常量，如下所示：

從'./app'導入{store};