React求和案例--react-redux

2024-02-03 09:08:23

设置项目

首先，我们需要创建一个新的React项目。我们可以使用create-react-app工具来做到这一点：

npx create-react-app react-sum-app

这将创建一个新的React项目，并在package.json文件中安装必要的依赖项。

接下来，我们需要安装Redux和Redux Toolkit：

npm install redux react-redux redux-toolkit

2. 创建React组件

现在，我们可以创建两个React组件：一个是显示输入字段和按钮的组件，另一个是显示结果的组件。

SumInput.js

import React, { useState } from 'react';

const SumInput = () => {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  const handleNum1Change = (e) => {
    setNum1(parseInt(e.target.value));
  };

  const handleNum2Change = (e) => {
    setNum2(parseInt(e.target.value));
  };

  return (
    <div>
      <input type="number" value={num1} onChange={handleNum1Change} />
      <input type="number" value={num2} onChange={handleNum2Change} />
      <button onClick={() => dispatch({ type: 'SUM', payload: { num1, num2 } })}>Sum</button>
    </div>
  );
};

export default SumInput;

SumResult.js

import React from 'react';

const SumResult = ({ sum }) => {
  return (
    <div>
      <h2>Result: {sum}</h2>
    </div>
  );
};

export default SumResult;

3. 设置Redux Store

现在，我们需要创建一个Redux store来管理状态。我们将使用Redux Toolkit来做到这一点。

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

import { configureStore } from '@reduxjs/toolkit';

const initialState = {
  sum: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SUM':
      return { ...state, sum: action.payload.num1 + action.payload.num2 };
    default:
      return state;
  }
};

const store = configureStore({
  reducer,
});

export default store;

4. 使用Redux

现在，我们需要在我们的React组件中使用Redux store。

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

import React from 'react';
import SumInput from './SumInput';
import SumResult from './SumResult';
import { useSelector } from 'react-redux';

const App = () => {
  const sum = useSelector((state) => state.sum);

  return (
    <div>
      <SumInput />
      <SumResult sum={sum} />
    </div>
  );
};

export default App;