Redux 在使用 combine reducer 时不起作用

Question

我是 redux 的新手并且也对本机做出反应。我正在尝试从具有初始状态的根减速器初始化基本存储。连接 root reducer 来存储我的 redux 时不起作用。但是当我连接单个减速器来存储我的 redux 时。

RootReducer.js

import {combineReducers} from 'redux';
import cartItemsReducer from './CartItems';
import {CounterReducer} from './Counter';

const RootReducer = combineReducers({
  cartItemsReducer,
  CounterReducer,
});

export default RootReducer;

购物车项目.js

import {ADD_TO_CART, REMOVE_FROM_CART} from '../Actions/ActionTypes';

const initialState = [];

const cartItemsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return [...state, action.payload];
    case REMOVE_FROM_CART:
      return state.filter((cartItem) => cartItem.id !== action.payload.id);
  }
  return state;
};

export default cartItemsReducer;

计数器.js

import {INCREASE_COUNT, DECREASE_COUNT} from '../Actions/ActionTypes';

const InitialState = {
  count: 0,
};

export const CounterReducer = (state = InitialState, action) => {
  switch (action.type) {
    case INCREASE_COUNT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREASE_COUNT:
      return {
        ...state,
        count: state.count - 1,
      };
  }
  return state;
};

商店.js

import RootReducer from '../Reducers/RootReducer';

export const store = createStore(RootReducer);

应用程序.js

import React from 'react';
import AppNavigator from './src/AppNavigator';
import {Provider} from 'react-redux';
import {store} from './src/Redux/Store/store';

const App = () => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

export default App;

计数器组件.js

我正在为我的应用程序使用函数组件

import React from 'react';
import {View} from 'react-native';
import AppHeader from '../Common/AppHeader';
import CustomButton from '../Common/CustomButton';
import CustomText from '../Common/CustomText';
import {useDispatch, useSelector} from 'react-redux';
import {INCREASE_COUNT, DECREASE_COUNT} from '../Redux/Actions/ActionTypes';
const CounterComponent = () => {
  const Counters = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const IncreaseCount = () => {
    dispatch({type: INCREASE_COUNT});
  };
  const DecreaseCount = () => {
    dispatch({type: DECREASE_COUNT});
  };
  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <AppHeader HeaderName="Counter" isLeft={true} leftIconName="arrowleft" />
      <View style={{width: 150, alignSelf: 'center', marginTop: 20}}>
        <CustomButton ButtonName="+" onPress={() => IncreaseCount()} />
        <CustomText value={Counters} style={{textAlign: 'center'}} />
        <CustomButton ButtonName="-" onPress={() => DecreaseCount()} />
      </View>
    </View>
  );
};

export default CounterComponent;

为什么我对 combineReducers 的使用与使用单个 rootreducer 时的工作方式不同？

Answer 1

合并减速器后，您的状态如下：

               store
                /\
               /  \
              /    \
cartItemsReducer   CounterReducer

所以你需要像这样引用计数器：

state.CounterReducer.count