使用 redux 输入的递增和递减计数器

Question

我想通过输入值增加和减少 counter.counter1 和 counter.counter2.innerCount。 这是我现在发现的错误

我在破坏物体等方面很弱，现在正在学习它。
可以给我任何建议或代码吗？特别是对于 innerCount 的递增和递减。非常感谢。

actionCreators.js

import * as actionTypes from "../actionTypes";

export const incrementCounter1 = () => {
  return {
    type: ActionTypes.INCREMENT_COUNTER_1,
  };
};

export const decrementCounter1 = () => {
  return {
    type: ActionTypes.DECREMENT_COUNTER_1,
  };
};

export const incrementByAmount = (amount) => {
  return {
    type: ActionTypes.INCREMENT_BY_AMOUNT,
    amount:amount,
  };
};

reducer.js

import * as actionTypes from "../actionTypes";

const INITIAL_STATE = {
  counter: {
    counter1: 0,
    counter2: {
      innerCount: 0,
    },
  },
};

export const Auth = (state = INITIAL_STATE, action) => {
  const { type, payload } = action;
  let a;
  switch (type) {
    case ActionTypes.INCREMENT_COUNTER_1:
      a = {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 +=1,
        },
      };
      return a;
    case ActionTypes.DECREMENT_COUNTER_1:
      a = {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 -=1,
        },
      };
      return a;
    case ActionTypes.INCREMENT_BY_AMOUNT:
      a = {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 +=payload,
        },
      };
      return a;
    default:
      return state;
  }
};

export default Auth;

mainPage.js

import React, { useState } from "react";
import { View, Text, StyleSheet, Button, TextInput } from "react-native";
import {
  incrementCounter1,
  decrementCounter1,
  incrementByAmount,
} from "./states/redux/ActionCreators/auth";
import { connect } from "react-redux";


const Counter = ({
  counterRedux,
  incrementCounter1,
  decrementCounter1,
  incrementByAmount,
}) => {
  const [amount, setAmount] = useState('');

  return (
    <View>
      <Text style={styles.text}>Input text for changing</Text>

      <Button title="INCREMENT" onPress={() => incrementCounter1()} />
      <Button title="DECREMENT" onPress={() => decrementCounter1()} />

      <View>
        <Text style={styles.Atext}>Enter amount to increase:</Text>
        <TextInput style={styles.input} value={amount} onChangeText={(a) => setAmount(a)} />
        <Text style={styles.Atext}>Amount: {amount}</Text>
        <Button title='Add Amount' onPress={(amount)=>incrementByAmount(amount)}></Button>
      </View>

      <View>
        <Text style={styles.Atext}>First Counter: {counterRedux.counter1}</Text>
      </View>
    </View>
  );
};

const mapStateToProps = (state) => {
  return {
    counterRedux: state.counter,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCounter1: () => dispatch(incrementCounter1()),
    decrementCounter1: () => dispatch(decrementCounter1()),
    incrementByAmount: (amount) => dispatch(incrementByAmount(amount)),
  };
};


const styles = StyleSheet.create({
  text: {
    fontSize: 25,
  },
  Atext: {
    fontSize: 20,
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
  },
  button: {
    backgroundColor: "#fff",
    fontSize: 15,
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

actionTypes.js

export const INCREMENT_BY_AMOUNT = 'INCREMENT_BY_AMOUNT';
export const INCREMENT_COUNTER_1 = 'INCREMENT_COUNTER_1';
export const DECREMENT_COUNTER_1 = 'DECREMENT_COUNTER_1';

Answer 1

您的第一个问题在这里：<Button title='Add Amount' onPress={(amount)=>incrementByAmount(amount)}></Button>。
您正在做的是将onPress 传递的参数传递给incrementByAmount，这根本不是您期望的amount，而是PressEvent 对象。
为了收到您期望的amount，您需要这样做：<Button title='Add Amount' onPress={() => incrementByAmount(amount)}></Button>，这样您就可以从useState 获得amount。

此外，您绝对不需要为您的计数器设置三个操作，更简单的方法是拥有一个 updateAmount 函数，您可以将 type 作为有效负载传递给该函数，该函数将是“增量”或“递减”和amount。
一个更简单的方法是只有一个数量，然后将负值或正值传递给它。
对于您的递增和递减按钮，您只需将 1 或 -1 传递为 amount。

您的第二个问题是您正在使用 += 和 -= 运算符在减速器中改变您的状态。
这是您的固定减速器（不过，我会让您实施我之前建议的更改）：

import * as actionTypes from "../actionTypes";

const INITIAL_STATE = {
  counter: {
    counter1: 0,
    counter2: {
      innerCount: 0,
    },
  },
};

export const Auth = (state = INITIAL_STATE, action) => {
  const { type, payload } = action;

  switch (type) {
    case ActionTypes.INCREMENT_COUNTER_1:
      return {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 + 1,
        },
      };
    case ActionTypes.DECREMENT_COUNTER_1:
      return {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 - 1,
        },
      };
    case ActionTypes.INCREMENT_BY_AMOUNT:
      return {
        ...state,
        counter: {
          ...state.counter,
          counter1: state.counter.counter1 + payload,
        },
      };
    default:
      return state;
  }
};

export default Auth;

我删除了不需要的 a 变量，并将 += 运算符更改为 + 并将 -= 运算符更改为 -，因此您的状态不会发生突变。

您的第三个问题是您正在解构一个变量 payload，而它在您的动作创建器中被称为 amount。
也不要忘记您从<TextInput> 获得string 而不是number。

最后，您将操作类型导入为actionTypes，但将它们用作ActionTypes。