什么是 Redux 中的商店？

Redux 是 JavaScript 应用程序中使用的状态管理库。它用于管理数据的状态并在应用程序的不同组件级别访问它们。在redux中，分为以下三部分：

• 行动
• 减速器
• 店铺

Store：它是一个提供应用程序状态的对象。该对象可以在项目文件中的提供者的帮助下访问。更改其内部状态的唯一方法是在其上分派一个操作。

商店有三个重要部分：

• createStore()：在 redux 中创建一个 store 对象。
• dispatch(action)：使用动作来改变存储数据的状态。
• getState()：用于在 redux 中获取 store 的当前状态。

让我们创建一个应用程序来演示如何定义商店。

创建反应应用程序

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

npx create-react-app example

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

cd example

第 3 步：安装以下模块。从终端中项目的根目录，运行以下命令：

npm install redux
npm install react-redux

例子：让我们在redux的帮助下做一个简单的计数器应用程序来了解商店。

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

项目结构：它看起来像这样。

文件夹结构

示例：在相应的文件中写下以下代码。

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")
);

在上面的 index,js 文件中，我们在整个应用程序组件中通过提供者访问了商店。

应用程序.js

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

            
        
    );
}
  
export default App;

在 components 文件夹中，这些文件如下所示：

计数器.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);

在 redux 文件夹中，这些文件如下：

动作/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 };

redux/store.js

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

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：

存储在 Redux