使用 Redux 和 Immutable.js 中的不可变性操作进行推送或添加
介绍
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是快速实现不可变性的最佳选择之一。我希望本指南能帮助你应用最佳的不可变性策略。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~