使用 Redux 和 Immutable.js 中的不可变性操作进行推送或添加

2020-10-29 08:00飞浪

介绍

React 使用 Redux 作为状态管理库，它在 store 的帮助下创建全局状态对象，所有子组件都可以订阅并使用全局状态的一部分作为 prop。Redux 状态是不可变的。一旦触发新操作，新的状态值就会反映出来。为了提高不可变性，可以使用 redux-immutable 等库。通过实现不可变性，这也将确保最高的性能。

本指南将帮助您了解 Redux 的不变性操作，您可以使用它将新项目推送或添加到状态。

为什么使用 Redux 和 Immutable.js？

不变性是应用程序性能的一个关键方面。为了管理整个应用程序的不变性，以及 Redux，使用了redux-immutable。当从组件分派操作时，关联的网络调用会触发并返回响应。然后，相同的响应应作为新对象添加到现有数据结构中。

通过遵循完整的 Redux 循环，应用程序可确保没有状态对象被意外改变，并且新的状态对象会从存储中返回。

如何使用 redux-immutable 推送或添加

要将新对象推送或添加到现有数据结构中，首先要安装给定的库。

      npm install immutable
npm install redux-immutable
    

安装两个库后，您将能够实现不可变的集合。

redux-immutable库与immutable库一起用作支持库，创建Immutable.Collection的实例。

打开store.js文件并粘贴以下代码行。

      import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";
// Used immutable
import Immutable from "immutable";
// Used redux-immutable
import { combineReducers } from "redux-immutable";
import reducers from "../reducers";

const logger = createLogger();

const reducer = combineReducers(reducers);

const store = createStore(
  reducer,
  Immutable.Map({}),
  applyMiddleware(thunk, logger)
);

export default store;
    

在上面的商店配置文件中，商店创建是通过函数CombineReducer()完成的，该函数从redux-immutable导入。

      const reducer = combineReducers(reducers);

而combineReducers()函数接受一个参数作为reducer的集合，即根reducer代表单个store状态对象。另一个需要注意的语句是不可变集合的初始化。

      Immutable.Map({})

上述语句使用状态的空初始值初始化状态，默认情况下，该值是不可变的。配置存储后，下一步是创建 Reducer 并将对象推送或添加到状态中。

Todo.js (Reducer)

      import _ from "lodash";
import { createReducer } from "redux-create-reducer";
import Immutable from "immutable";

const initialState = Immutable.fromJS([
    {
        done: true,
        id: _.uniqueId(),
        name: "TODO 1"
    },
    {
        done: false,
        id: _.uniqueId(),
        name: "TODO 2"
    }
]);

const ADD_TODO = (domain, action) => {
    return domain.push(
        Immutable.Map({
            done: false,
            id: _.uniqueId(),
            name: action.data.name
        })
    );
};

export default createReducer(initialState, {
    ADD_TODO
});
    

在上面的 Reducer 文件中，有一个名为initialState的const ，包含初始todos列表，但该对象被不可变的初始化函数包围，如下所示。

      const initialState = Immutable.fromJS([
    {
        done: true,
        id: _.uniqueId(),
        name: "TODO 1"
    },
    {
        done: false,
        id: _.uniqueId(),
        name: "TODO 2"
    }
]);
    

函数fromJS()将对象映射为不可变对象，您可以添加或推送新对象，如下所示。

      return domain.push(
        Immutable.Map({
            done: false,
            id: _.uniqueId(),
            name: action.data.name
        })
);
    

domain.push()用于将新的 todo 项添加到现有的 todo 对象中，这与普通的对象赋值相反。最后一步是将 store 分配给应用程序，如下所示。

Index.js

      import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
// Store with immutability
import store from "./store";

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
    

创建的存储被导入到 React 应用程序的索引中并分配给提供程序，以便您一旦分派操作，新对象就会添加到全局状态对象中。

结论

不变性是一种解决方案，它可以通过遵循不变性的最佳实践而不是使用改变 Redux 状态对象的普通方式来帮助克服应用程序性能问题。

你可以使用不可变库，特别是对于 React，redux-immutable是快速实现不可变性的最佳选择之一。我希望本指南能帮助你应用最佳的不可变性策略。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光27264浏览1459