在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

免费开始。

Redux商店管理的核心概念

9月14日, 2021

主题。
语言

这篇文章讨论了Redux商店管理的核心概念。我们将了解如何在应用程序中管理状态，引用组件，以及执行异步操作。

首先让我们讨论一下Redux是什么，以及如何将其集成到应用程序中。

主要收获

本文涉及以下几个分题。

什么是Redux和存储管理？
如何设置Redux商店。
Redux数据流中的动作和还原器。
将一个应用程序连接到Redux商店。
用Redux Thunk进行异步调用。

什么是Redux和存储管理？

Redux是一个JavaScript库，描述了应用程序的状态应该如何管理和访问。

它支持通过一个集中的存储进行状态管理。

虽然有很多像Flux这样的库支持状态管理，但Redux中的数据流很清晰，也更容易集成。

应用状态

应用状态指的是收集和存储的数据，供组件参考。

加载每个组件或整个应用程序所需的数据都存储在状态中。

在过去，状态管理是相当具有挑战性的。Redux有助于解决开发者通常遇到的一些问题。

store ，在这里，是Redux提供的一个容器，用于管理、访问和监控应用程序的动态状态。

记住，状态不是静态的，只是因为进入应用程序的每个请求都会操纵状态，并提示重新渲染整个应用程序。

不仅应用程序的状态是由Redux商店管理的，而且由客户端触发的行动也是如此。

设置Redux商店

在开发过程中，可以在浏览器中设置Redux DevTools以获得更好的体验。

要安装它，请在Google Chrome 商店中搜索Redux Extension 。

在访问Redux商店之前，我们需要安装Redux。这可以通过应用程序包管理器或在计算机上本地进行。

Redux需要安装和配置一个JavaScript包管理器npm 或yarn 。

在每个Redux应用程序中，我们将初始化npm 项目。

$ npm init

Redux还可以与不同的JavaScript框架集成，如JQuery 、React 、Vue 、Angular 、TypeScript 。

在应用程序根目录内，打开你的终端或bash窗口，运行以下命令。

# NPM
$ npm install redux 

# YARN
$ yarn install redux

要在项目模块中保存Redux DevTools ，请输入以下命令。

$ npm install --save-dev redux-devtools-extension
$ npm install redux-thunk

在安装了所需的依赖性后，我们现在可以将Redux商店与应用程序的状态连接起来。

在根目录下，我们可以做一个名为Store 的文件夹，然后添加一个store.js 文件，配置如下。

    import { createStore, applyMiddleware } from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension';
    import thunk from 'redux-thunk';

    import rootReducers from './reducers';

    const initialState = {};
    const middleware = [thunk];

    const store = createStore(
        rootReducers,
        initialState,
        composeWithDevTools(applyMiddleware(...middleware))
    );

    export default store;

在这个文件中，我们要把一些方法从它们的类中解构出来。

createStore 函数创建Redux商店，它需要像rootReducers,initialState, 和composeWithDevTools 这样的参数。

initialState ，顾名思义，是一个空对象，存储整个应用程序的状态。

rootReducers 也是一个来自reducer 文件的对象，它将所有的reducer函数与存储连接起来。

最后，composeWithDevTools 是一个函数，它需要一个applyMiddleware ，以展示应用程序的状态和在浏览器中触发的动作，有redux extension 。

商店文件导出了变量store ，这使得它在连接时可以在整个应用程序中被访问。

最后，连接配置的商店取决于我们所针对的框架类型。

假设我们正在构建一个React 项目，我们必须安装一个react-redux ，以便与Redux商店连接。

$ npm install react-redux

连接是在一个index.js 文件内进行的，如下图所示。

我们从react-redux 中导入Provider ，作为一个组件，需要一个强制性的store 参数。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import App from './App';
    import store from './Store/store';

    ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
           <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
    );

然而，这样做将使Redux商店被浏览器访问，所有与状态相关的活动都将被监控。

要引用Redux开发工具，请在浏览器内按windows的CTRL+SHIFT+i ，或Mac的CMD+SHIFT+i 。

Redux数据流中的动作和还原器

每个客户端的动作都可以触发一个特定的活动，与reducer绑定。

存储器被还原器调用，根据发送的数据更新状态。然后，它重新渲染用户界面以显示这些变化。

什么是行动？

在Redux数据流中，action是一个JavaScript函数，它返回一个具有type 和payload 属性的对象。

动作type 描述了要由还原器执行的操作种类，而动作payload 指的是每个动作从客户端收到的数据。

请注意，payload 也可以是一个对象本身。下面可以找到一个演示，所有的动作都包含在action.js 文件中。注意，你可以改变这个文件名。

    export const YOUR_TYPE = (name) => {
        return {
            type: "YOUR_TYPE",
            payload: {
                id: 1,
                value: name 
            }
        }
    }

Reducer是什么意思

如前所述，Redux的还原器可以在行动被触发时被调用。

因此，Reducer是JavaScript函数，需要根据收到的动作改变应用程序状态的state 、action 、和 "返回 "部分。

然而，一个Reducer绝不应该直接突变整个应用状态。另外，他们可以复制出需要改变的那部分状态，并在更新后返回。

异步操作，如API调用，在还原器中是不允许的。

我们使用条件语句来切换动作类型，每种类型都会返回其更新的状态。

注意，还原器函数的数量取决于应用程序的大小。如果有一个以上的还原器，那么你需要rootReducers 。这个组件将结合所有的还原器，为store 。

这是通过利用redux 中的combineReducers 函数并传入减速器来实现的。

普通的还原器被限制在一个特定的文件夹中，而根还原器则被导出到商店中。

例如，在reducers 文件夹中，我们可以为每个还原器准备不同的文件，并为rootReducer 一个index.js 文件。

    import { combineReducers } from "redux";
    import leads from './leads';
    import auth from './auth';

    export default combineReducers({
        leadsReducer: leads,
        authReducer: auth
    })

Redux减速器的逻辑实例在下面突出显示。

    import * as actionTypes from './actions';

    const initialState = {
        leads: []
    }

    const leads = function(state=initialState, action){
        switch(action.type) {
            case actionTypes.YOUR_TYPE_1:
                return {
                    ...state, 
                    leads: action.payload 
                }
            case actionTypes.YOUR_TYPE_2:
                return{
                    ...state,
                    leads: [...state.leads, action.payload]
                }
            default:
                return state;
        }
    }

    export default leads;

...state 命令或spread operator 复制整个状态对象，这样就可以引用需要的部分。

将Redux商店连接到应用程序组件

尽管Redux商店已经连接到应用程序，但每个应用程序组件应该直接引用状态。

在这种情况下，我们将需要一个名为connect() 的模块，从react-redux 。

这个connect() 的函数需要四个可选的参数，名为mapStateToProps,mapDispatchToProps,mergeProps 和options 。

这只是为组件提供来自Redux商店的数据。

    export default connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(COMPONENT)

让我们分解每个参数，了解更多关于它们的信息。

    mapStateToProps? : (state, ownProps?) => object

如果使用这个参数，新组件将订阅商店的更新。mapStateToProps 将商店的状态与组件的道具连接起来，这些道具也包裹着connect() 模块。

这最多可以接收两个参数。state 参数是强制性的。因此，如果不使用它，请使用null 或undefined 。

    mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

mapDispatchToProps 可以是一个对象、函数或未定义。它最多需要两个参数。

此外，如果使用，该组件将从商店接收动作触发器。

``js mergeProps? : (stateProps, dispatchProps, ownProps) => Object


`mergeProps` should be specified with a maximum of three parameters and by default, the component receives `ownProps`, `stateProps`, and `dispatchProps` if not specified.

```js
    options?: Object

v6 在react-redux 的版本中，上面的代码允许每个连接的组件传递一个上下文对象。上下文可以通过options 参数发送。

    {
        context?: object
    }

进行异步调用

在Redux中，有很多类型的异步调用可以做。

如前所述，执行像API调用这样的异步操作决不能在reducers 。

每个异步调用都涉及一个函数，该函数从调用它们的组件中获取参数，并返回另一个带有dispatch() 和getState()? 参数的函数。

来自API的数据将与特定的动作类型一起作为有效载荷被派发。

每个派发方法都会调用Redux商店，该商店会根据收到的动作类型来触发还原器。

然后还原器返回调用者所需的更新状态，该状态以属性的形式进入组件，即props 。

下面的代码演示了Redux应用程序中异步调用的一个实例。

    import axios from 'axios';
    import * as actionTypes from '../actions/types'

    export const loadUser = () => (dispatch, getState) => {
        // calling loading action
        dispatch({type: actionTypes.USER_LOADING});
        axios.get('http://localhost/8000/api/auth/user', tokenConfig(getState))
            .then(res => {
                dispatch({
                    type: actionTypes.USER_LOADED,
                    payload: res.data
                })
            })
            .catch(err => {
                console.log(err)
                dispatch({
                    type: actionTypes.AUTH_ERROR
                })
            })
    }