使用 Redux 在 React 组件中更改 State

Question

我对 Redux 很陌生，并且将它与 React 应用程序一起使用。 我目前正在编写多人太空战略游戏。 I have the redux set up and I have the state called inside my component, but I cannot seem to figure out how to change the state from a onClick inside a button. 下面是代码：First（最初的 State Reducer），Second（另一个保持新状态的 Reducer），Third（Counter 和 CounterAction 和 index）Fourth（将发生 state 更改的组件）。

    import uuid from 'react-uuid';
const initalState = [
  {
    userId: 1,
    name: 'metal-mine',
    level: '0',
    productionAmount: '250',
    energy: '5',
    amount: '0',
  },
];

const metalMineReducer = (state = initalState, action) => {
  // const { type, payload } = action;

  switch (action.type) {
    case 'METAL_MINE':
      state = {
        ...state,
        level: state.level + action.payload,
        productionAmount: state.amount + action.payload,
        energy: state.energy + action.payload,
        amount: state.amount + action.payload,
      };
    default:
      return state;
  }
};

export default metalMineReducer;

第二

const currentMetalMine = (state = {}, action) => {
  switch (action.type) {
    case 'METAL_MINE':
      return {
        ...state,
        metal: action.payload,
        loggedIn: true,
      };
    default:
      return state;
  }
};

export default currentMetalMine;

第三

const counter = (state = 1, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

export default counter;

3.2

const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

export default {
  increment,
  decrement,
};

3.4

import counterActions from './counterActions';
import metalMineActions from './metalMineActions';

const allActions = {
  counterActions,
  metalMineActions,
};

export default allActions;

组件 state 将在

import React, { useCallback, useEffect, useState } from 'react';
import { Button, Col, Container, Row } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import MetalMine1 from './MinesImages/Metal-Mine.jpg';

export default function MetalMine() {
  let metal = useSelector((state) => state.metalMine[0].level);
  let currentMetalMine = useSelector((state) => state.currentMetalMine);
  let counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  console.log(metal);
  return (
    <Container>
      <Row>
        <Col>
          <br />
          <h4
            style={{
              color: 'whitesmoke',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            Metal Mine Level: {metal}
          </h4>
          <br />
        </Col>
      </Row>
      <Row>
        <Col style={{ display: 'flex', justifyContent: 'center' }}>
          <img src={MetalMine1} alt='Metal Mine' height='300px' width='300px' />
        </Col>
      </Row>
      <br />
      <Row>
        <Button
          variant='outline-dark'
          style={{ color: 'whitesmoke', fontSize: '20px' }}
        >
          Upgrade
        </Button>
      </Row>
      <br />
    </Container>
  );
}

因此，在查看一些文档后，我更新了组件中的 state，但我需要它来更改 state 并递增 1。

export default function MetalMine() {
  let currentMetalMine = useSelector((state) => state.currentMetalMine);
  let counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const [metal, setMetal] = useState(useSelector((state) => state.metalMine));
  console.log(metal);

  const increment = () => {
    setMetal((counter) => counter + 1);
  };



  return (
    <Container>
      <Row>
        <Col>
          <br />
          <h4
            style={{
              color: 'whitesmoke',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            Metal Mine Level: {metal.level}
          </h4>
          <br />
        </Col>
      </Row>
      <Row>
        <Col style={{ display: 'flex', justifyContent: 'center' }}>
          <img src={MetalMine1} alt='Metal Mine' height='300px' width='300px' />
        </Col>
      </Row>
      <br />
      <Row>
        <Button
          onClick={increment}
          variant='outline-dark'
          style={{ color: 'whitesmoke', fontSize: '20px' }}
        >
          Upgrade
        </Button>
      </Row>
      <br />
    </Container>
  );
}

需要改变电平的数据*

{userId: 1, name: "metal-mine", level: 0, productionAmount: "250", energy: "5", …}
amount: "0"
energy: "5"
level: 0
name: "metal-mine"
productionAmount: "250"
userId: 1

当我在金属矿上单击升级时，它会在 object 的末尾添加 1，但不会更新 object。

我希望有人能帮我弄清楚如何更改 state。 任何帮助，将不胜感激！

Answer 1

您应该将onClick处理程序添加到您的按钮，这将调用dispatch ：

<Button onClick={() => {
   dispatch(setMetalMine(...))
}} />

我不确定这个按钮应该做什么，但这是你调度一个动作的方式，所以你可以根据你的需要调整它