Redux 在使用 combine reducer 时不工作答案

【问题标题】：Redux is not working while using combine reducerRedux 在使用 combine reducer 时不工作
【发布时间】：2021-02-26 22:06:58
【问题描述】：

我是 redux 的新手，并且对原生也有反应。我正在尝试从具有初始状态的根 reducer 初始化基本存储。连接 root reducer 以存储我的 redux 时不起作用。但是当我连接一个 reducer 来存储时，我的 redux 正在工作。

RootReducer.js

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

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

export default RootReducer;

CartItems.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;

Counter.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;
};

store.js

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

export const store = createStore(RootReducer);

App.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;

CounterComponent.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;

为什么我使用 combineReducer 的方式与使用单个 rootreducer 时的方式不同？

【问题讨论】：

标签： react-native redux

【解决方案1】：

组合reducer后，你的状态变成如下：

               store
                /\
               /  \
              /    \
cartItemsReducer   CounterReducer

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

state.CounterReducer.count

【讨论】：

【解决方案2】：

除了 Wen W 的回答之外，如果您记录您的“状态”，您将看到一个包含两个减速器的对象。这就是为什么你需要在组合它们之后按名称访问reducer。

只需更改此行：

const Counters = useSelector((state) => state.CounterReducer.count);

【讨论】：