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

Posted

技术标签:

【中文标题】通过从非反应组件调度操作来更新 React 组件【英文标题】:Update React component by dispatching action from non-react component 【发布时间】:2016-07-27 05:27:50 【问题描述】:

当用户将商品添加到购物车时,我正在尝试更新项目上的购物车按钮。

我已经在 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 组件中调度一个动作时,它工作正常。

我可能遗漏了一些明显的东西。有什么建议吗?

【问题讨论】:

您是否绝对确定您在 same store 上调用调度,该store 传递给您的&lt;Provider /&gt; 如rossipedia所说,你是只实例化了一个store,还是多次调用createStore 我很确定我使用的是同一家商店。我已经更新了更详细的代码 sn-ps。我不明白为什么它不更新。正如我在帖子中提到的那样;当我从 Cart.js 组件更新时, CartButton.js 中的数量正在更新。 我尝试设置 shouldComponentUpdate() return true; 在我的 CartButton.js 组件中,但仍然没有运气。 呃,您的代码几乎表明您正在创建两个商店。一个在您的“提供者”部分,一个在“导入......然后”部分。这并不难测试,在你的 mapStateToProps 函数中设置一个断点,看看你的新预期状态是否曾经传递给你的组件。 【参考方案1】:

所以我最终发现,你不应该在多个地方定义你的商店。

我只是从我的根 app.js 文件中导入了 store 常量,如下所示:

从'./app'导入 store ;

【讨论】:

感谢@Sacho 澄清

以上是关于通过从非反应组件调度操作来更新 React 组件的主要内容,如果未能解决你的问题,请参考以下文章

通过从 sql server 加入表来更新访问表

useSelector 在调度后定义但随后未定义

如何通过从vuejs组件获取数据在Laravel控制器中创建多个行

react组件通信与生命周期

react组件通信与生命周期

react组件通信与生命周期