通过 React + Redux 实现的兰顿蚂蚁程序——代码与现实的完美碰撞

2024-01-23 07:18:00

兰顿蚂蚁是一种由计算机模拟的简单生物，其行为看似简单，但却能产生令人着迷的复杂图案。通过使用 React 和 Redux，我们可以构建一个交互式的兰顿蚂蚁程序，帮助我们更好地理解其背后的算法和原理。

兰顿蚂蚁简介

兰顿蚂蚁是一种二维网格上的生物，其行为规则如下：

如果蚂蚁位于白色方块，则向右旋转 90°，反转方块的颜色，然后向前移动一步。
如果蚂蚁位于黑色方块，则向左旋转 90°，反转方块的颜色，然后向前移动一步。

蚂蚁的行为看似简单，但它所产生的图案却令人着迷。随着时间的推移，蚂蚁会在地面上留下各种各样的轨迹，这些轨迹有时像蜿蜒的小径，有时像复杂的迷宫，有时甚至会形成令人惊讶的对称图案。

使用 React + Redux 构建交互式兰顿蚂蚁程序

为了更好地理解兰顿蚂蚁的行为及其背后的算法，我们可以使用 React 和 Redux 构建一个交互式的演示程序。React 是一个流行的前端框架，以其组件化和高性能而闻名。Redux 是一种状态管理库，可以帮助我们管理应用程序的状态，使其更加易于理解和维护。

安装依赖

首先，我们需要安装必要的依赖：

npx create-react-app langton-ant
cd langton-ant
npm install redux react-redux

创建 Redux Store

在 src 目录下创建一个名为 store.js 的文件，并添加以下代码：

import { createStore } from 'redux';

const initialState = {
  antPosition: [5, 5],
  antVelocity: [1, 1],
};

function antReducer(state = initialState, action) {
  switch (action.type) {
    case 'START':
      return { ...state, antVelocity: [1, 1] };
    case 'STOP':
      return { ...state, antVelocity: [0, 0] };
    case 'SPEED_UP':
      return { ...state, antVelocity: [2, 2] };
    case 'SLOW_DOWN':
      return { ...state, antVelocity: [0.5, 0.5] };
    default:
      return state;
  }
}

const store = createStore(antReducer);

export default store;

创建 Redux Actions

在 src 目录下创建一个名为 actions.js 的文件，并添加以下代码：

export const startAnt = () => ({
  type: 'START',
});

export const stopAnt = () => ({
  type: 'STOP',
});

export const speedUpAnt = () => ({
  type: 'SPEED_UP',
});

export const slowDownAnt = () => ({
  type: 'SLOW_DOWN',
});

创建 React 组件

在 src 目录下创建一个名为 LangtonAnt.js 的文件，并添加以下代码：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { startAnt, stopAnt, speedUpAnt, slowDownAnt } from './actions';

function LangtonAnt() {
  const antPosition = useSelector(state => state.antPosition);
  const antVelocity = useSelector(state => state.antVelocity);
  const dispatch = useDispatch();

  const handleStart = () => {
    dispatch(startAnt());
  };

  const handleStop = () => {
    dispatch(stopAnt());
  };

  const handleSpeedUp = () => {
    dispatch(speedUpAnt());
  };

  const handleSlowDown = () => {
    dispatch(slowDownAnt());
  };

  return (
    <div>
      <h1>兰顿蚂蚁</h1>
      <div>
        <button onClick={handleStart}>开始</button>
        <button onClick={handleStop}>停止</button>
        <button onClick={handleSpeedUp}>加速</button>
        <button onClick={handleSlowDown}>减速</button>
      </div>
      <div>
        <p>当前位置: ({antPosition[0]}, {antPosition[1]})</p>
        <p>当前速度: ({antVelocity[0]}, {antVelocity[1]})</p>
      </div>
      <div>
        <canvas width={800} height={600} style={{ border: '1px solid black' }} />
      </div>
    </div>
  );
}

export default LangtonAnt;

将 Redux Store 与 React 应用程序集成

在 src/App.js 文件中添加以下代码：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import LangtonAnt from './LangtonAnt';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <LangtonAnt />
      </div>
    </Provider>
  );
}

export default App;