Rims - 换个方式使用 Redux

栏目: 服务器 · 发布时间: 5年前

内容简介:这就意味着如果有一个组件脱离了这颗树, 那么这个组件将无法与

react-redux 通过 context 将整个项目变成了一颗 "组件树", 每个组件变成了这棵树上的节点

Rims - 换个方式使用 Redux

这就意味着如果有一个组件脱离了这颗树, 那么这个组件将无法与 store 通信

rims 架构下, 整个项目看起来像是一个圆环, 无论是子组件或父组件, 他们直接与圆环中心相关联

Rims - 换个方式使用 Redux

rims 提供与 react-redux 相同用法的 connect .

rims 即插即用 甚至可以与原有使用 react-redux 的项目共存(注意: 同一组件不要同时使用二者的 connect ), 可将 store 直接传入 createConnect , 只维护一个 store .

Quick Start

Installation

npm install --save rims
复制代码

or

yarn add rims
复制代码

Create store and connect

// createConnect.js
import { createStore } from 'redux';
import reducers from './reducers';
import { createConnect } from 'rims';

const store = createStore(reducers);

export default createConnect(store);
复制代码

需要创建一个新的文件, 用于创建 storecreateConnect

创建 store , 我们仅替换了 react-redux , 好消息是若你此前配置过 store , 那么 store 不需要变动, 仅仅导出 createConnect 即可. 当然这也意味着我们仍然可以用 redux 的插件: redux-thunk redux-logger 等.

Connect Components

import connect from './createConnect';

@connect(state => state)
class App extends React.Component{
  // ...
}
复制代码

多页面应用状态共享

通过状态数据持久化实现, 使用 redux-persist 实现状态数据持久化.

// createConnect.js
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import reducers from './reducers';
import { createConnect } from 'rims';

const persistConfig = {
  key: 'root',
  storage: storageSession,
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store = createStore(persistedReducer);

export default createConnect(store);
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员面试算法宝典

程序员面试算法宝典

猿媛之家 / / 机械工业 / 2018-09-01 / 69.0

一起来看看 《程序员面试算法宝典》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具