如何在redux (RFC)中为多个reducer使用订阅?

Question

我想在一个页面上使用来自两个reducer的数据。当使用联合减速机时

我得到这个错误，

Attempted import error: 'cartItemsReducer' is not exported from './cartItemsReducer'.
Attempted import error: 'getProductDetailsReducer' is not exported from './getProductDetailsReducer'.

我有两个减速器，

1。cartItemsReducer

const initialState = {
cartItems : ""
}
function cartItemsReducer(state=initialState, action) {
switch(action.type) {
case "totalCartItems" : 
return {
cartItems: action.data.length
}
default : 
return state;
}
}
export default cartItemsReducer;

2。getProductDetailsReducer

const initialState = {
data : []
}
function getProductDetailsReducer(state=initialState, action) {
switch(action.type) {
case "bookClicked" : 
return {
data: action.data
}
default : 
return state;
}
}
export default getProductDetailsReducer;

和一个根减速器

import { combineReducers } from "redux";
import { getProductDetailsReducer } from "./getProductDetailsReducer";
import { cartItemsReducer } from "./cartItemsReducer";
export default combineReducers({
getProductDetailsReducer,
cartItemsReducer
});

这是我的商店

import {createStore, applyMiddleware} from "redux";
import logger from "redux-logger";
import combineReducers from "../reducer/rootReducer";
const store = createStore(combineReducers, applyMiddleware(logger));
export default store; 

这就是我订阅的方式

store.subscribe(function () {
console.log(store.getState().data);
console.log(store.getState().cartItems);
});

这就是我如何使用connect

export default connect()(CartPage);
export default connect()(ProductPage);

Answer 1

当使用react-redux时，您不应该使用store.subscribe或store.getState-这是通过使用useSelector(这是首选的方式，但只有在使用功能组件时才可用)或connect来完成的。

使用useSelector，它看起来像

function MyComponent(props){
const somethingFromData = useSelector(state => state.data.something)
const somethingFromCartItems = useSelector(state => state.cartItems.something)
}

关于你的问题:您正在执行默认导出，但命名为import。这是两个不同的概念。你需要做什么import getProductDetailsReducer from "./getProductDetailsReducer";-不含{}.

一般来说，我认为你可能在Redux上遵循非常过时的资源，因为现代Redux看起来非常不同。请遵循Redux官方教程:https://redux.js.org/tutorials/essentials/part-1-overview-concepts