Question

我有两个计数器的简单计数器应用程序。一切正常，直到我尝试使用combineReducers()。

这是我的 Reducer文件：

const reducerCounter = (state={counterBarca:0,counterReal:0}, action) => {
  console.log(action.type);
  console.log(state);
  switch (action.type) {
    case 'INCREMENT_BARCA':
      return { ...state, counterBarca: state.counterBarca + 1};
    case 'INCREMENT_REAL':
      return { ...state, counterReal: state.counterReal + 1 };
    default:
      return state;
    }
};

export default reducerCounter;

这是我的 Counter文件的一部分，其中有按钮。

.
.
.

const mapStateToProps = (state) => {
  console.log('mapStateToProps', state.counterBarca);
  return {
    counterBarca: state.counterBarca,
    counterReal: state.counterReal,
   };
};
const mapDispatchToProps = (dispatch) => {
  return {
    onIncrementBarca: () => dispatch({ type: 'INCREMENT_BARCA' }),
    onIncrementReal: () => dispatch({ type: 'INCREMENT_REAL' })
  }
};

Counter = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default Counter;

最后是我的 App.js ，我在其中导入了我的reducer和显示按钮和计数器的组件：

import React, { Component } from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducers/reducerCounter';


//components
import Counter from './components/Counter';

import './App.css';

const store = createStore(reducer);
.
.
.

当我尝试使用 combineReducers 并将其导入我的 App.js 中时，计数器不起作用。当我undefined计数器时，它向我显示console.log。这是为什么？为什么当我使用Combinereducers时计数器什么都没显示（然后是undefined）？

Answer 1

您使用的mapStateToProps错误。像这样使用它：

const mapStateToProps = (state) => {
  console.log('mapStateToProps', state.counterBarca);
  return {
    counterBarca: state.reducerCounter.counterBarca,
    counterReal: state.reducerCounter.counterReal,
   };
};

请注意此部分：

    counterBarca: state.reducerCounter.counterBarca,
    counterReal: state.reducerCounter.counterReal,

在这里，我在全局状态下将reducerCounter用于减速器状态。使用它如何在combineReducers函数中打开。因此，您试图在全局counterBarca中获得一个state，但实际上它在state.reducerCounter.counterBarca之类的其他地方。

简单的Redux应用程序，当我使用CombineReducers

1 个答案: