In the development of modern applications, managing the state efficiently and scalable is crucial. One of the most popular architectures for state management is Redux, which offers a clear and predictable way to handle the status of the application. This article explores how to implement a REDux architecture in a swiftui application using Reswift and Reswiftthunk, along with the use pattern to encapsulate business logic. But if you are like me, and you like to put hands to the code directly, you can check the repository with the implementation here (https://github.com/transmigrado/archocurheswiftui), if you still do not know Redux and you would like to explore it as an alternative To your developments on Swift using swiftui, this article will help you leave.
The motivation to implement a REDux architecture in one of the projects in which I am working, is born of the need to have more compatible architectures with the most modern work forms such as Jetpack Compose and in the case of iOS Swiftui, these two declarative technologies In order to create interfaces in mobile environments, they are very compatible with reactive architectures such as Redux, allowing enough friendly life cycles to maintain.
In the project, Firebase was used for comfort issues, what was wanted to explore was like implementing an architecture that is handled by actions to modify the states of the application. You feel free to use the project, adding your own data consumption, since architecture is fully isolated from business logic, which is encapsulo in use cases (uses)
What is Redux?
REDux is a predictable state management architecture initially designed for JavaScript applications, especially those built with React. The main idea behind Redux is to have a single store (storage) that contains the status of the application and can only be modified through actions. A reducer, which is a pure function, receives the action and the current state, and returns a new state.
What is Reswift?
Reswift is an implementation of REDux on Swift for iOS applications. Redux is a predictable architecture pattern for the management of the application status, initially popularized by JavaScript applications such as those created with React. Reswift takes this pattern to the Swift ecosystem, offering a clear and structured way to handle the state of your iOS application.
What is Reswiftthunk?
Reswiftthunk is a reswift extension that allows the handling of asynchronous logic and secondary actions. Thunks are functions that can dispatch other actions or execute additional logic before dispatching an action. In Reswift, THUNKS help maintain the state of the clean and predictable application while allowing asynchronous operations such as call calls, database (chore .
You can find these two bookstores in their respective repositories:
Reswift repository: (https://github.com/reswift/reswift)
Reswift-Thunk repository: (https://github.com/reswift/reswift-thunk)
The data flow in this architecture will see something like that, usually the UI will shoot an action, this action will be received by the reducer, which will modify the state and in turn, this state will be heard by our UI component, in addition to being able to launch Secondary actions, such as calling an API or the database, we will use a thunk, the thunk will be a kind of bridge between the REDux flow and our business logic, which will be encapsulated in a use
What is a reducer?
A reducer is a pure function that takes the current state of the application and an action as arguments, and returns a new state. The reducer function should not have side effects, that is, we must not use this function to call APIs, local databases or modify the UI, we only modify the properties based on an action, as shown below
In this way we can create the necessary unit tests to prove a reduction, we must simply declare a state and the action we want to prove, after the reducer is invoked with this action, the new state must meet our conditions.
What is a thunk?
A thunk is a function that is used to handle asynchronous actions or actions that do not result in immediate state changes. In other words, it allows us that a dispatched action is not only an object of simple action, but can be a function that contains additional logic, such as API calls, consultations to a local database or any other asynchronous operation, before dispatch regular action.
A thunk will be a function that does not directly return an object of action, but returns a function that receives the Dispatch as an argument. This function can execute asynchronous logic and then dispatch one or more actions based on the result of this logic.
As we describe before, we will use a thunk to execute an asynchronous effect, in this case we will call Fetchashncdata of our use to bring the posts and then dispatch an action so that the state of our application changes.
Here we can see how a thunk works communicating with the flow we describe at the beginning, we will detail each step.
PostThunks
The postthunks class acts as a container for asynchronous logic that recovers posts from a service or use case.
- Método fetchThunk():
This method returns a THUNK, which is a function that allows asynchronous operations to be executed before dispatching actions in the Redux flow.- Thunk fetchThunk:
This Thunk receives Dispatch (which allows dispatching actions) and Getstate (which allows access to the current state) as arguments. This is where the flow of the actions is managed as well- Dispatch(FetchAction()): Before executing the asynchronous task, an action called fetchaction is dispatched, which probably indicates in the user interface that the application is loading (such as showing a load indicator).
- Task {}: A task block is used to run asynchronous code within the context of the THUNK. Here is called the Fetchasyncdata () method from the Usecase, which is an asynchronous call that recovers posts data.
- Dispatch(PostsAction(list: posts)): If the API call is successful, the recovered posts are dispatched through the postsaction action, which will update the status of the application with the posts list.
- Thunk fetchThunk:
PostsState:
This structure defines how the state related to the posts in the application is represented.
- list: Stores a list of posts that will be displayed in the application.
- isLoading: Indicate whether the application is currently in the process of loading the data.
- postsReducer :
This reducer has the function of taking action and the current state of the application and returns a new state, updated according to the action.
- FetchAction: When this action is dispatched, the reducer changes the Isloading value to True, indicating that the application is in the process of obtaining data.
- PostsAction: When the posts are recovered and dispatched, this action updates the list of posts in the state (state.posts.list) and puts isloading in false, indicating that the load is over.
- General flow of thunk:
- When calling Fetchthunk (), the Thunk dispatches the fetchaction action to indicate that the posts load has begun.
- Then make an asynchronous call to recover the posts through the use.
- If the call is successful, dispatched the postsaction action with the list of posts obtained, which the State updates.
- If the so -called failure, it simply prints the error without affecting the State (although it could be improved with an error action).
In conclusion, the combination of REDux with Reswift and Reswiftthunk offers a robust and predictable architecture to handle the state in Swiftui applications. By encapsulating the business logic in uses and handling asynchronous actions through Thunks, a clear and efficient flow is achieved to manage the life cycle of the data. This approach not only allows a more organized and testable code, but also facilitates the implementation of scalable and maintainable architectures in modern mobile projects. Inviting developers to explore this architecture is an excellent opportunity to improve their skills in asynchronous state management and logic in Swiftui applications.
