Redux
Published on September 28, 2022
1min to read
Redux An Unopinionated very minimal library to help developers manage global state behave consistently across your app, making it easier with undo/redo, state persistence, Redux DevTools on any user interface (UI) layer. A version of flux built by FB, store state in a kinda database for FrontEnd, makes data flow transparent and predictable.
Works with React, Angular, Vue, and Vanilla JavaScript, component updates automatically. UI agnostic, store APIs re-renders when the data it needs has actually changed.
Including store setup, creating reducers and writing immutable update logic. A store object being a single source of truth, an object tree inside a single store.
State Management
Replaces state tracked component const [state, setState] = useState(0)
Redux toolkit
Opinionated Redux what? A standard way to write Redux now the recommended approach to Redux write shorter logic that's easier to read, creating entire "slices" of state. A store handled using Redux Toolkit batteries-included toolset axios interceptors.
- configureStore(): createStore wrapper
let store = createStore(counterReducer) - createReducer() reducer function signature is:
(state, action) => newStatenew state based on the old state. A current state value and an action object describing "what happened", and returns a new state value. - createAction() an action, an object describing what happened and dispatch it to the store
- createSlice() a slice of the store modular
- createAsyncThunk
- createEntityAdapter
- createSelector
RTK query
A tool that is purpose-built for the data fetching and caching use case. Redux write significant amounts of reducer logic to manage the loading state and the cached data, powerful data fetching and caching tool. Eliminating the need to hand-write data fetching & caching logic yourself. "data fetching and caching" is really a different set of concerns than "state management" React community. Similar to Apollo Client, React Query.
Redux TypeScript what ?
What is TypeScript (TS) ? https://www.typescriptlang.org/ read my blog post link
Excellent debugging tool Firefox Redux DevTools
https://axios-http.com/docs/interceptors