Rims - 換個方式使用 Redux

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