Redux Rematch — State Management
Explore Redux Rematch — Powerful State Management For React.
Rematch is an enhanced version of Redux with added few more features, clean architecture, less boilerplate for React Developers. Rematch uses the same redux concept and also has a persistor to persist store data.
Let’s look into architecture,
Redux Rematch Architecture
Provider contains an argument store. Here, we need to pass our store object in store argument to initialize Rematch Store.
Microfrontends With React | KPITENG
All we know about Microservices, which helps to develop, deploy and maintain applications individually. Like Uber where…
To initialize a store we need to pass models, plugins, redux, etc. Let’s check the syntax,
Models — Models contain state, reducer and effects in one instead of separate like Redux.
Plugins — Plugins contain Loading Plugins, Persist Plugins.
Redux — Contains middleware to perform some action in middleware between store & frontend.
How to improve the performance of a React Native App? | KPITENG
See how you will boost your react native app performance, improve start-up time, decrease bundle size & memory usage.
Models are the core part of Store. Model contains state variables, reducers, effects. Frontend will dispatch action, which executes in effects and once effect computed task it will dispatch to reducer and reducer is responsible for updating state variables. So whenever the state variable is updated our component is also notified.
As you can see in Image, when UI Dispatch action it executes effects in model, once effect completed its execution it dispatches to reducers and reducer is only responsible to update state. Once the state gets updated it will re-render the UI Component.
Top 10 React Tricks Every Developer Should Use | KPITENG
Discover a set of React best coding practices, tips and tricks that should be known by all developers. Many times we…
Rematch allows various plugins, you can set Loading Plugins, Persist Plugins.
Loading Plugins -
When we dispatch any action, we have to wait for a fraction of time until we receive results (API Call, Local Operation). Redux in-built having plugins that manage and return us loading = true which effect (action) being in-progress.
You can create Loading PlugIns using createLoadingPlugin, and pass your model name/actionname in the whitelist. As you can see we have taskList (model), fetchTaskList (action). So after this code, whenever the fetchTaskList operation is in-progress we will get loading as true, once it’s completed we get loading as false.
Persist Plugins -
Persist Plugins contains all required configuration like, whitelist, blacklist, version, storage, transforms, Let’s discuss each in details,
whitelist — Specify a list of models which you want to store in storage, even though you kill an application, restart application.
blacklist — Specify list of models which you don’t want to store in storage, so next time it will load with initial state, instead of saved state.
version — version of store,each to you deploy new application increase the version number, which help to migrate data from older version to newer version.
storage — Specify the storage when your store data is saved, for mobile applications ideally we prefer AsyncStorage, while in web we prefer default Web Storage.
transform — Specify Filters, many times you are required to blacklist a model (don’t want to store state value/ persist state value) but you want to store a few key/pairs only. So you can create whitelist filters for a few keys, and pass the model name in blacklist. So Rematch will only store key/pairs which you have sent in the whitelist.
Top 10 React Hooks Library | React | React JS | Tech Article | Tech Talk
Discover Top 10 React Hooks Library - use-http, Redux Hooks, useMedia, React Hook Form, Constate, useDebounce, React…
Redux contains middlewares, you can specify middlewares. You can create your own middleware to perform some action between UI Component and Effect which action dispatch by UI Component.
For example, let’s specify logger as middleware, so when you dispatch action, it will log in the console to track actions, same way whenever reducer updates the state at the same time logger also logs in console to update users about Rematch actions.
Now Let’s take an example of a Model and dispatch actions from the Component.
Model — TaskList.js
Component — Tasks.js
As you can see in Tasks Component, We are dispatching fetchTaskList on load of Component. Will call effect in TaskList.js model. Once fetch operation completed it will dispatch setTasks (action), which calls function in reducers, and reducer will update state variables of arryTasks, which in result re-render our Tasks Component.
Thanks for reading full article!
Read More Technical Articles