Redux 中常量的用途是什么？

在 Redux 中，我们在创建应用程序并从 redux 管理其状态时定义了很多动作和 reducer。然后，常量出现了，它提供了一种在一个文件或一个地方定义动作和减速器类型的方法。

考虑常数的原因：

• 在两个不同的文件中使用了 action 和 reducer 的类型。常量有助于导入它们并从单个页面使用它们。
• 代码的可读性提高了，因为所有常量都列在一个文件中，并在一次读取中提供信息。
• 它有助于减少写作时的小打字问题。

内容示例：

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

让我们用 react 和 redux 创建一个应用程序来演示常量的用途：

创建反应应用程序

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

现在从终端中项目的根目录，运行以下命令

npm install redux

npm install react-redux

示例：让我们借助 redux 制作一个简单的计数器应用程序，以了解常量的用途。

在 src 文件夹中，新建两个文件夹组件和 redux。在 components 文件夹中添加一个名为 Counter.jsx 的 jsx 文件。在 redux 文件夹中，创建一个文件夹名称为 actions 并将文件 counterActions.jsx 文件添加到其中。然后在redux文件夹中创建一个文件夹名称reducer并添加一个文件currencyReducer.jsx。在 redux 文件夹中添加 store.js 文件。

项目结构：项目结构如下所示：

文件夹结构

以下是我们的应用程序中需要修改的文件：

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import appStore from "./redux/store";
  
ReactDOM.render(
    
        
            
        
    ,
    document.getElementById("root")
);

应用程序.js

import "./App.css";
import Counter from "./components/counter";
  
function App() {
    return (
        

            
        
    );
}
  
export default App;

组件/Counter.jsx

import React from "react";
import { connect } from "react-redux";
import {
    incrementCount,
    decrementCount,
} from "../redux/actions/counterActions";
  
class Counter extends React.Component {
    render() {
        const { count, incrementCount, decrementCount } = this.props;
        return (
            

                 decrementCount()}>-
                 {count} 
                 incrementCount()}>+
            
        );
    }
}
  
const mapStateToProps = (state) => ({
    count: state,
});
  
const mapDispatchToProps = (dispatch) => ({
    decrementCount: () => dispatch(decrementCount()),
    incrementCount: () => dispatch(incrementCount()),
});
  
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

动作/counterActions.jsx

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
  
const incrementCount = () => ({
    type: INCREMENT,
});
  
const decrementCount = () => {
    return {
        type: DECREMENT,
    };
};
  
export { INCREMENT, incrementCount, decrementCount, DECREMENT };

这里我们定义了两个常量：

• 增量
• 递减

我们在动作中使用这两个常量作为它们的类型。

减速器/currencyReducer.jsx

import { INCREMENT, DECREMENT } from "../actions/counterActions";
  
const currencyReducer = (state = 0, action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        case DECREMENT:
            return state - 1;
        default:
            return state;
    }
};
  
export { currencyReducer };

store.js

import { createStore } from "redux";
import { currencyReducer } from "./reducers/currencyReducer";
  
const appStore = createStore(currencyReducer);
  
export default appStore;

运行应用程序的步骤：设置所有文件后，从终端运行以下命令启动应用程序运行

npm start

输出：

输出