Rims-deck

即插即用的 react 與 redux 連線池, 提供與 react-redux 相同的 api.

Why not react-redux ?

react 專案一般都由一顆 "元件樹" 構成, 每個元件變成了這棵樹上的節點, react-redux 通過 context 作為中介與各個元件通訊

這就意味著如果有一個元件脫離了這顆樹, 那麼這個元件將無法與 store 通訊. 例如 一個特殊的彈框元件

另一方面, 對於一些較為特殊的 react 應用(即依靠瀏覽器或其他路由方式的多頁面應用), 這樣頁面跳轉後只能依靠資料持久化方式( sessionStorage localStorage 等)共享資料.

這種情況下, 由於基本上很難存在 根元件 的概念, react-redux 就顯得無比乏力.

Why rims ?

rims 僅僅是在一些特殊場景下代替了 react-redux(還是需要 redux)

rims 可以與 react-redux 共存(同一元件不要同時使用二者的 connect), 可將 store 直接傳入 createConnect, 只維護一個 store. => demo

實質上 rims 的 connect 元件的結果是將元件直接與 store 相連

使用 rims, 首先需要建立 store 和構建 connect 方法

import { createConnect } from 'rims';
export default createConnect(store);
複製程式碼

createConnect(store) 就是我們建立好的 connect 方法, 可以看出與 react-redux 使用不同的地方在於: rims 需要自行建立 connect

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);
複製程式碼

需要建立一個新的檔案, 用於建立 store 和 createConnect

建立 store, 我們僅替換了 react-redux, 好訊息是若你此前配置過 store, 那麼 store 不需要變動, 僅僅匯出 createConnect 即可. 當然這也意味著我們仍然可以用 redux 的生態: redux-thunk redux-logger redux-devtools 等.

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);
複製程式碼

最後

rims 仍然有許多不足, 如果你對 rims 感興趣, 歡迎加入

=> get rims