Question

我1个月学习Redux并遇到一些麻烦，我有一个小的电子商务示例页面用Redux制作addToCart，但我不使用Pure React来处理所有组件。在产品页面中，列出我的所有产品，我使用句柄提交保存＆＃34;添加到购物车＆＃34;当用户点击＆＃34;添加到购物车＆＃34;按钮，但是当用户点击它时，我希望我的导航栏菜单添加到购物车图标将更新我的用户状态。

但问题是，导航栏和产品列表不是彼此同步的，换句话说，我拆分组件并使用不同的DOM渲染，如何将状态从产品列表更新到导航栏但具有不同的组件？

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import rootReducer from './reducers/rootReducer';
import {composeWithDevTools} from 'redux-devtools-extension';
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
    rootReducer,
    composeWithDevTools(
        applyMiddleware(thunk)
    )
);

if(document.getElementById('product-show')){
    ReactDOM.render(
        <Provider store={store}>
        <App/>
        </Provider>,
        document.getElementById('product-show')
    )
}

这是ProductPage组件，它没有与数据库中的购物车/订单表同步，但是与购物车页面分开，ProductPage在产品展示ID中呈现。

和CartPage相同，我复制粘贴代码并修复导入路径。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import rootReducer from '../reducers/rootReducer';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
    rootReducer,
    composeWithDevTools(
        applyMiddleware(thunk)
    )
);

if (document.getElementById('order-cart')) {
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('order-cart')
    )
}

并且此CartPage（或orderPage）嵌入在Navbar（购物车图标）中。但是同样的减速器和动作也存储相同的状态，

我想要的是，当ProductPage（其中有添加到购物车按钮保存订单表）时，CartPage也因为其存储状态相同而更新状态，但我必须重新加载页面以从ProductPage更新状态

抱歉，如果我的英语不好先生，我猜udemy.com将其组件分开

更新相同的存储但在不同的组件Redux中

0 个答案: