Javascript 如何使用redux增加简单计数器和对象组件计数器

（请帮助修复我的代码）我想编写计数器增量代码，以便了解redux的情况：

能够增加简单计数器

能够用对象增加计数器

现在，面对主页上未定义的计数器1

这是我的减速机，我是如何创建的

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

const INITIAL_STATE = {
  counter: {
    counter1: 0,
    counter2: 0,
    counter3: {
      innerCount1: 0,
      innerCount2: 0,
    },
  },
};

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

export default Auth;

动作类型文件

export const INCREMENT1 = "INCREMENT1";

和主页

import React from "react";
import { View, Text, Button } from "react-native";
import { incrementCounter1 } from "./states/redux/ActionCreators/auth";
import { connect, useDispatch } from "react-redux";

const CounterReduxScreen = ({ counterRedux, incrementCounter1 }) => {
  const dispatch = useDispatch();

  const handleCounterIncrement1 = async () => {
    incrementCounter1();
  };

  return (
    <View>
      <Text style={styles.text}>Redux Pratice</Text>

      <Button title="Increase" onPress={handleCounterIncrement1} />
      <View>
        <Text>Value first counter: {counterRedux.counter1}</Text>
      </View>
    </View>
  );
};

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

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

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

从“React”导入React；
从“react native”导入{视图、文本、按钮}；
从“/states/redux/ActionCreators/auth”导入{incrementCounter1}”；
从“react-redux”导入{connect，useDispatch}；
const CounterReduxScreen=（{counterRedux，incrementCounter1}）=>{
const dispatch=usedpatch（）；
const handleCounterIncrement1=async（）=>{
递增计数器1（）；
};
返回(
重复实践
值第一个计数器：{counterRedux.counter1}
);
};
常量mapStateToProps=（状态）=>{
返回{
counteredux:state.counter，
};
};
const mapDispatchToProps=（调度）=>{
返回{
incrementCounter1:（）=>分派（incrementCounter1（）），
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（CounterReduxScreen）；

您在减速器中为

案例操作类型设置的状态不正确。递增1

。进行以下更改以修复它：

case ActionTypes.INCREMENT1:
  a = {
    ...state,
    counter: {
      // ...state.counter is needed so that counter2 and counter3 values are not removed
      ...state.counter,
      // counter1 is not directly accessible which is why you're getting the error
      // you need to access it via state.counter as shown below
      counter1: state.counter.counter1 + 1,
    },
  };
  return a;

要增加

计数器3

的

innerCount1

的值，可以如下所示更新状态：

case ActionTypes.INCREMENT3A:
  a = {
    ...state,
    counter: {
      ...state.counter,
      counter3: {
        ...state.counter.counter3,
        innerCount1: state.counter.counter3.innerCount1 + 1,
      },
    },
  };
  return a;

---

谢谢你的帮助。柜台3.1怎么样？我声明如下，但它不起作用。。。a={……状态，计数器：{……状态。计数器。计数器3，innerCount1:state。计数器。计数器3..innerCount+1，}，}；返回a；你想用相同的动作类型还是单独的动作类型来处理这个问题？我用单独的动作类型来处理。如case ActionTypes.INCREMENT3A更新我的答案以处理

ActionTypes.INCREMENT3A

。