Rims - 換個方式使用 Redux
阿新 • • 發佈:2019-01-09
Rims-deck
即插即用的
react
與redux
連線池, 提供與react-redux
相同的 api.
Why not react-redux
?
react-redux
通過 context
將整個專案變成了一顆 "元件樹", 每個元件變成了這棵樹上的節點
這就意味著如果有一個元件脫離了這顆樹, 那麼這個元件將無法與 store
通訊
rims
架構下, 整個專案看起來像是一個圓環, 無論是子元件或父元件, 他們直接與圓環中心相關聯
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);
複製程式碼
需要建立一個新的檔案, 用於建立 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