[WP] 23.02.2023 | react-redux

 

fig 1.1 redux data flow

-----------------------------------------------------------------------

In this post I am going to make a quick revision of past several days as I didnt update daily. I have decided to familiarise with state management libraries in react. As short intro it is worth mentioning that nowadays each of frontend frameworks have their own implementation of state management library. For react it is redux, for Angular: NgRx and for Vue it is Pinia.

To begin with redux is a state container – a way to globally manage state within react app. It provides a way to maintain consistent state between client, server and native environments. Redux-managed state has also one great feature. Redux comes with a so called: time traveling debugger – a tool which allows to track state changes. Consequently it facilitates debugging process. This tool comes with redux dev tools addon nowadays available for main browsers. Use of redux lets web apps to be scaled more easily. Redux devtools let trace every mutation to the action that caused it. You can record user sessions & reproduce them by replaying every action – sounds cool!

Redux toolkit is recently published set of tools to improve using redux. It has slightly different way of working than simple redux but offers the same fuctionality. Redux-toolkit package may be installed via npm by command „npm install reduxjs/toolkit” or attached during use of create-react-app command by adding a flag „–template redux-typescript”. Redux toolkit icludes mutating logic of reducers(using immer library). This library detects changes to a draft state and produces the brand new immutable state based on those changes(no requirement of implicit state copy.)

I have revised several definitions which are crutial to describe redux library ecosystem. Firstly all state is stored in one or more store object. Store object have form of object tree. Store instance is created by createStore() method. Another important entity is action – plain object describing required state mutations. It simply pass the answer to a question (What happened?) – action type and optionally includes payload required to update global state. It may be created in case of : eg. „user subscription”, „timer expired” or „network request completed”. All actions are passed to the store object by dispatcher.

All actions are handled by pure reducer function with conditional statement(if/else or more likely switch statement) which for each case(mostly action name is stated with capital letters) calculates new state based on current state and action received from the dispatcher. Reducer function signature: (state, action) => newState The state use rule for reducer is: „do not mutate the state return new object with changed values and set it as a new state”. In pure redux state object need to be explicitly copied updated and then set as a new state. Redux toolkit does same thing but object copying is done implicitly. Redux toolkit like reducer function signature is (state, action) => newState. It takes state to modify and action and returns new state. State object should contain: objects, arrays and primitives only.

In this paragraph i will present simplified steps to begin with redux. 1st create redux store holding the state of your app(redux store API{subscribe, dispatch, getState}) – let store = createStore(„storeReference”). 2nd optional: subscribe to update UI in response to state changes: store.subscribe(()=>{console.log(store.getState())}) – normally you’d use a view binding library instead of subscribe directly. 3rd From now on the only way to mutate internal state of the app is to dispatch appropriate action.

Last but not least small apps using redux may contain single store with single reducing function. Greater size apps state may be splitted into smaller stores with different reducers operating on diferent parts of the state tree.

Catching up

gmarcin