[WP] 30.05.2023 | redux-toolkit

fig 1.1 redux-principles; <source: Tomasz Ducin presentation on frontend architecture>

 

    Hi, in this blog post I’d like to introduce you to redux which is complex state management tool for web applications. I will describe it from a react point of view but it may be used with other frontend frameworks as well. Redux is recommended to be implemented using redux-toolkit - a set of utilities which facilitate developer experience during redux logic implementation. One of redux-toolkit authors is Marc Ericsson (that guy with simpson avatar)

To begin with we need to install three packages: react-redux, @types/react-redux and @reduxjs/toolkit. The next step is to create store. Store instance is initialized with configureStore({reducer:{<import your 1st reducer and put its name here!>}) utility. It is also a good location to declare types for rootState(may be called App state) which is main representation of the application state and dispatch. The following snippets may be used to declare rootState and dispatch types: 

export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

The next big thing is to export store instance and pass it to store attribute of redux provider component and wrap whole app within provider component. All the children included within this component will be enabled to publish changes to store and subscribe to the global state held in redux store. redux is an example of pub-sub design pattern. Recently i learned that redux is not analogical to react-context. It only utilize react context as a layer of transportation.

Components may communicate with global state via useSelector() and useDispatch() hooks. Firstly useDispatch hook returns dispatch method which takes an action creator as argument. For example dispatch(setPresentCurrency(„USD”)). This dispatch method call sends action object {type:<action_type>, payload: <some_data>} to the reducer. Reducer identifies function type and modifies global state with use of payload data attached to the action object. Global state may be accessed by useSelector hook as follows: useSelector((state: RootState) => state.currency.presentCurrency). Any time global state changes all subscribers(components using useSelector() hook) are notified and updated. Redux toolkit simplify definition of action creators and reducers. Moreover it allows to organize store structure by dividing it into slices containing global state logic for particular feature or part of application. Finally redux-toolkit uses immer js library under the hood. To cut the long story short we can write code that mutates state object and redux-toolkit will take care about copying and updating the state.

Redux is a complex tool for state management in client-side web applications. It unifies application state providing single source of truth and structured way to read and update it. It requires more code to write and may be overkill for small applications for simple purposes or static sites.

Goodday to ya all

Marcin