Rims-deck

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

Why not react-redux ?

react-redux 通過 context 將整個專案變成了一顆 "元件樹", 每個元件變成了這棵樹上的節點

這就意味著如果有一個元件脫離了這顆樹, 那麼這個元件將無法與 store 通訊

rims 架構下, 整個專案看起來像是一個圓環, 無論是子元件或父元件, 他們直接與圓環中心相關聯

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

rims 即插即用 甚至可以與原有使用 react-redux

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 等.

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

License

MIT