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

所以我最终弄清楚的是，你不应该在多个地方定义你的商店。

我只是从我的根app.js文件导入了商店常量，如下所示：

从＆＃39; ./ app＆＃39;;

导入{store}

通过从非反应组件调度操作来更新React组件

1 个答案: