Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geekeast/redux-state-managment
Tips on state management of Redux on React. Share some Performance Optimization Techniques as well.
https://github.com/geekeast/redux-state-managment
hooks performance redux redux-thunk reselect
Last synced: 2 months ago
JSON representation
Tips on state management of Redux on React. Share some Performance Optimization Techniques as well.
- Host: GitHub
- URL: https://github.com/geekeast/redux-state-managment
- Owner: GeekEast
- Created: 2020-02-11T23:33:23.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:03:11.000Z (about 2 years ago)
- Last Synced: 2023-03-07T21:04:02.295Z (almost 2 years ago)
- Topics: hooks, performance, redux, redux-thunk, reselect
- Language: TypeScript
- Homepage: https://codesandbox.io/s/redux-state-management-3gpnb
- Size: 992 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Basics
### Important Functions in Redux
- `compose`
```javascript
import { compose } from 'redux';
const makeLouder = string => string.toUpperCase();
// @ts-ignore
const repeatThreeTimes = string => string.repeat(3);
const embolden = string => string.bold();
const makeLouderAndRepeatThreeTimesAndEmbolden = compose(makeLouder, repeatThreeTimes, embolden);
const tag = document.createElement("span");
const textNode = document.createTextNode(makeLouderAndRepeatThreeTimesAndEmbolden('b'));
tag.append(textNode);
document.getElementById("app")!.appendChild(tag);
```
- `store.subscribe`
```javascript
const store = createStore(rootReducer);
const unsubscribe = store.subscribe(() => {
console.log(store.getState().a);
});
store.dispatch({ type: "ADD_ONE", payload: 1 });
store.dispatch({ type: "ADD_ONE", payload: 1 });
store.dispatch({ type: "ADD_ONE", payload: 1 });
store.dispatch({ type: "ADD_ONE", payload: 1 });
store.dispatch({ type: "ADD_ONE", payload: 1 });
unsubscribe();
```
### Normalized state
- `normalizr`:
- `id` is a **must**;
- `only` need to define **relationships** in schema.
- **Update**: you probably don't need `ids`.
```javascript
import { normalize, schema } from "normalizr";
import defaultState from "./default-state.json";
// schema
const user = new schema.Entity("users");
const card = new schema.Entity("cards", {
assignedTo: user
});
const list = new schema.Entity("lists", {
cards: [card]
});
// normalize
const normalizedLists = normalize(defaultState.lists, [list]);
// export normalized data
export const lists = {
entities: normalizedLists.entities.lists,
ids: normalizedLists.result
};
export const cards = {
entities: normalizedLists.entities.cards,
ids: Object.keys(normalizedLists.entities.cards)
};
export const users = {
entities: normalizedLists.entities.users,
ids: Object.keys(normalizedLists.entities.users)
}
```
### Dev Tool
- Don't use `const composeEnhancers =
(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: process.env.NODE_ENV === "development", traceLimit: 25 })) ||
compose;`
- use `yarn add redux-devtools-extension`
```javascript
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({
// Specify here name, actionsBlacklist, actionsCreators and other options
});
const store = createStore(reducer, composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
));
```
## `Object.is` vs `shallowCompare`
- **single** property -> `Object.is`
- **multiple** properties -> `shallowCompare`
## Reference
- [Github/reselect](https://github.com/reduxjs/reselect#reselect)
- [Redux Hooks](https://react-redux.js.org/next/api/hooks#hooks)
- [React组件设计实践总结](https://bobi.ink/2019/05/10/react-component-design-01/)
- [React Patterns](https://reactpatterns.cn/)
- [React Bits](https://vasanthk.gitbooks.io/react-bits/)
- [Mind Hacks](http://mindhacks.cn/)
- [有赞技术](https://tech.youzan.com/tag/team-introduction/)