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

Question

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

我收到此错误，

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. 获取ProductDetailsReducer

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);
  });

这就是我使用连接的方式

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)
}

至于你的问题：你正在做一个默认的 export ，但是一个命名的 import 。 这是两个不同的概念。 您需要import getProductDetailsReducer from "./getProductDetailsReducer"; - 没有{} 。

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