在Redux中如何在还原剂中编写函数

Question

我正在从事一个反应项目，因为我必须执行增量操作，并且我正在写作。

这是商店里的逻辑，但我现在不知道如何阻止它在6点之后的增长。

因此，请有人帮助我如何写逻辑，以停止增长后6，它的初始值。

是1.当我单击加号图标时，它必须增加，但它必须停止递增

在第6位之后。在这个项目中，我使用的是。

我是Buttontypes.js

export const additionVariable = 'ADDITION'

我是Buttonactions.js

import { additionVariable }  from './Buttontypes'; 

export const addition = () => {
    return {
        type: additionVariable
    }
}

我是Buttonreducer.js

import { additionVariable } from './Buttontypes';

const initialState = {
    value: 1
}

const additionReducer = (state = initialState, action) => {
    switch(action.type) {
        case additionVariable: return {
            ...state,
            value: state.value + 1
        }
        default: return state
    }
} 

export default additionReducer

我是store.js

import { createStore } from 'redux';
import mainReducer from './Button/Buttonreducer';

const store = createStore(mainReducer);

export default store

我是App.js

import React from 'react';
import './App.css';

import { connect } from 'react-redux';

import { addition } from './Redux/Button/Buttonactions';

function App(props) {
  return (
    <div className="container">
      <div className='row'>
        <div className='adultbox pr-2'>
          <div className='onebox'>
            <span className='adultminus'>-</span>
          </div>
          <div className='twobox'>
            <span className='adultvalue'>{props.value}</span>
          </div>
          <div className='threebox'>
            <span onClick={props.Fun} className='adultplus'>+</span>
          </div>
        </div>
      </div>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    value: state.value
  }
}

const mapDispatchToProps = dispatch => {
  return {
    Fun: () => dispatch(addition())
  }
}


export default connect(mapStateToProps,mapDispatchToProps)(App)

Answer 1

为你的减速机试试这个：

​

import { additionVariable } from './Buttontypes';

const initialState = {
    value: 1
}

const additionReducer = (state = initialState, action) => {
    switch(action.type) {
        case additionVariable: return {
            ...state,
            value: state.value <= 6 ? state.value + 1 : state.value
        }
        default: return state
    }
} 

export default additionReducer

​

Answer 2

除了已经建议的还原器之外，我还建议您在mapDispatchToProps中添加一个检查，如果值等于6，则(可选)禁用+：

const mapDispatchToProps = dispatch => {
  return {
    Fun: (value) => {
        if (value < 6 { 
            dispatch(addition())
        }
    }
  }
}

然后，在App.js中：

<div className='threebox'>
    <span onClick={() => props.Fun(props.value)} className='adultplus'>+</span>
</div>