javascript - 简单的 Redux 应用程序，仅当我使用 mergeReducers 时 Counter 返回未定义

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;

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

.
.
.

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 中时，计数器不起作用。当我console.log我的计数器时，它显示未定义。这是为什么 ？为什么当我使用combinereducers时计数器什么也没显示(那么它是未定义)？

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为您的全局状态中的 reducer 状态。使用它如何在您的 combineReducers 中打开功能。所以，您正在尝试获取 counterBarca在您的全局state但实际上它在其他地方，例如 state.reducerCounter.counterBarca .