Question

我有一个非常简单的应用程序。这是计数器应用程序，其中按钮是图像，每个图像都有自己的计数器。

我已将计数器的精简器导入我的 App.js 文件import reducer from './reducers/reducerCounter';

我为减速机const store = createStore(reducer);创建了一个商店

我还设置了reducer内部的counter的默认值（在单独的文件中）

const reducerCounter = (state={counterBarca:0,counterReal:0}, action) => {
  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;

一切正常，但现在我想创建另一个reducer并在单独的文件index.js中使用CombineReducers将它们组合在一起

import {combineReducers} from 'redux';
import reducerAnother from './reducerAnother'
import reducerCounter from './reducerCounter'

const rootReducer = combineReducers({reducerCounter, reducerAnother});

export default rootReducer;

它甚至不显示计数器的默认值。控制台中没有错误或警告。我用这样的组合减速器导入新文件

import reducer from './reducers/index';

这是我的Counter组件文件，其中显示了计数器和图像。此组件还可以使onclick上的一幅图像变大（同时使第二幅图像变小）

import React, { Component } from 'react';
import { connect } from 'react-redux';

import barca_logo from '../barca.png';
import real_logo from '../real.png';

class Counter extends Component {
  constructor(props){
    super(props);

    this.state = {
      barca_logo_height: 200,
      real_logo_height: 200
    }

  }

  render() {
    const { counterBarca, counterReal, onIncrementBarca, onIncrementReal } = this.props;

    const incClickBarca = () => {
      onIncrementBarca();
      increaseSizeBarca();
    };
    const incClickReal = () => {
      onIncrementReal();
      increaseSizeReal();
    };

    const increaseSizeBarca = () => {
      if (counterBarca < 30) {
        this.setState({
          barca_logo_height: this.state.barca_logo_height + (this.state.barca_logo_height/50),
          real_logo_height: this.state.real_logo_height - (this.state.real_logo_height/50)
        });
      }
    }

    const increaseSizeReal = () => {
      if (counterReal < 30) {
        this.setState({
          real_logo_height: this.state.real_logo_height + (this.state.real_logo_height/50),
          barca_logo_height: this.state.barca_logo_height - (this.state.barca_logo_height/50)
        });        
      }
    }
    return (
      <div className="container">
          <div className="row">
          <div className="col-sm-5">
            <img className="teamLogo" height={this.state.barca_logo_height} src={barca_logo} onClick={() => incClickBarca()} alt="team"/>
          </div>
          <div className="col-sm-2">
            <span>{counterBarca}</span>
            <span> : </span>
            <span>{counterReal}</span>
          </div>
          <div className="col-sm-4">
            <img className="teamLogo" height={this.state.real_logo_height} src={real_logo} onClick={() => incClickReal()} alt="team"/>
          </div>
          </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  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;

当我在单独的文件中包含所有组件，reduces和while应用程序时，为什么它甚至没有显示计数器的默认值？

我看到当我在 reducerCounter 文件中键入console.log(state);时，我看到它正在工作，但是计数器中的数字仍然没有显示

Answer 1

我认为您不需要导出为rootReducer，而是在reducers / index.js下使用它

import { combineReducers } from 'redux'
import reducerAnother from './reducerAnother'
import reducerCounter from './reducerCounter'

export default combineReducers({
  reducerAnother,
  reducerCounter
})

然后将其导入：

import rootReducer from './reducers'

Answer 2

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

或为连接的组件使用别名

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

export default ConnectedCounter;

如何在ReactJS中组合化约器并将其分成自己的文件

2 个答案: