ohai.social

Jobs for DevelopersAudius is hiring Software Engineer - Backend🔧 <a href="https://mastodon.world/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.world/tags/python" class="mention hashtag" rel="nofollow noopener" target="_blank">#python</a> <a href="https://mastodon.world/tags/rust" class="mention hashtag" rel="nofollow noopener" target="_blank">#rust</a> <a href="https://mastodon.world/tags/solidity" class="mention hashtag" rel="nofollow noopener" target="_blank">#solidity</a> <a href="https://mastodon.world/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a> <a href="https://mastodon.world/tags/electron" class="mention hashtag" rel="nofollow noopener" target="_blank">#electron</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/reactnative" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactnative</a> <a href="https://mastodon.world/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.world/tags/api" class="mention hashtag" rel="nofollow noopener" target="_blank">#api</a> <a href="https://mastodon.world/tags/blockchain" class="mention hashtag" rel="nofollow noopener" target="_blank">#blockchain</a> <a href="https://mastodon.world/tags/docker" class="mention hashtag" rel="nofollow noopener" target="_blank">#docker</a> <a href="https://mastodon.world/tags/elasticsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#elasticsearch</a> <a href="https://mastodon.world/tags/postgresql" class="mention hashtag" rel="nofollow noopener" target="_blank">#postgresql</a> <a href="https://mastodon.world/tags/redis" class="mention hashtag" rel="nofollow noopener" target="_blank">#redis</a> 🌎 Remote ⏰ Full-time 🏢 AudiusJob details <a href="https://jobsfordevelopers.com/jobs/software-engineer-backend-at-audius-co-may-31-2022-52aa63?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/software-engineer-backend-at-audius-co-may-31-2022-52aa63?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

Jobs for DevelopersByte-Code is hiring Front-End Engineer🔧 <a href="https://mastodon.world/tags/csharp" class="mention hashtag" rel="nofollow noopener" target="_blank">#csharp</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.world/tags/api" class="mention hashtag" rel="nofollow noopener" target="_blank">#api</a> <a href="https://mastodon.world/tags/docker" class="mention hashtag" rel="nofollow noopener" target="_blank">#docker</a> <a href="https://mastodon.world/tags/kubernetes" class="mention hashtag" rel="nofollow noopener" target="_blank">#kubernetes</a> 🌎 Chiasso, Switzerland ⏰ Full-time 🏢 Byte-CodeJob details <a href="https://jobsfordevelopers.com/jobs/front-end-engineer-at-byte-code-com-mar-6-2025-ee6208?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/front-end-engineer-at-byte-code-com-mar-6-2025-ee6208?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

Steinar Bangs bloggConvert react/redux webapp from saga/axios to RTK query and RTK listener <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">Redux saga</a> is a core component of my react/redux applications. Unfortuately <a href="https://www.reddit.com/r/reactjs/comments/1em8hc6/comment/lgy9pch/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1" rel="nofollow noopener" target="_blank">Redux Saga has been deprecated</a> and haven’t seen an upgrade in the last year. This blog posts covers the replacement of <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux saga</a> and <a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a> with <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> and <a href="https://redux-toolkit.js.org/api/createListenerMiddleware" rel="nofollow noopener" target="_blank">RTK listener</a> in a react redux webapp. Introduction The structure of this blog post, is: <ol><li>First a walk through of how to use <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> and <a href="https://redux-toolkit.js.org/api/createListenerMiddleware" rel="nofollow noopener" target="_blank">RTK listener</a> in a React application</li><li>Then I’ll sum up the changes made, what was good and what didn’t feel like an improvement to me</li></ol> That means if searching on the web for how to use <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> landed you here, you’ll find the good stuff first and can skip the rest. As for why you should use <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a>…? If you, like me, is still using redux with <a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a> and <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">saga</a>, then switching to <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> is a no-brainer, since <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux Saga</a> hasn’t seen an update since February 1 2024, and <a href="https://www.reddit.com/r/reactjs/comments/1em8hc6/comment/lgy9pch/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1" rel="nofollow noopener" target="_blank">is now deprecated</a>. If you’re not using redux because you have heard that it is hard to understand, bloated and require a lot of boilerplate, then you should reconsider. You should reconsider for the same reason I keep using redux: the existence of <a href="https://github.com/reduxjs/redux-devtools?tab=readme-ov-file#redux-devtools" rel="nofollow noopener" target="_blank">redux devtools</a>. I find what I miss most when dealing with local state and context object is an easy way to examine the application’s current and entire state and trace when the state changes a particular value. Writing console.log() to output the data to find what’s in there, is so… I don’t know… 1985…? So without further ado, here’s how to use redux with <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> in a react application (requires knowledge of JavaScript, it is helpful to know React, and knowledge of redux would help even more). Using RTK query Adding the dependencies Go to the directory containing package.json and run the following commands (first scrub existing dependencies and then add new ones): <pre>npm uninstall react react-dom react-redux "@reduxjs/toolkit"rm package-lock.jsonnpm install react react-dom react-redux "@reduxjs/toolkit"</pre> After this you should have all of the newest versions of the required dependencies. If converting from <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">saga</a>/<a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a>, then remember to scrub unneccessary dependencies after completing the conversion, with: <pre>npm uninstall redux-saga axiosrm package-lock.jsonnpm install</pre> Queries and mutations With <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux-saga</a> and <a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a>, data from a REST API backend is loaded by something like this <pre>import { takeLatest, call, put } from 'redux-saga/effects';import axios from 'axios';import { ACCOUNTS_REQUEST, ACCOUNTS_RECEIVE, ACCOUNTS_FAILURE } from '../reduxactions';export default function* accountsSaga() { yield takeLatest(ACCOUNTS_REQUEST, receiveAccountsResult);}function* receiveAccountsResult() { try { const response = yield call(getAccounts); const accountsresult = (response.headers['content-type'] === 'application/json') ? response.data : {}; yield put(ACCOUNTS_RECEIVE(accountsresult)); } catch (error) { yield put(ACCOUNTS_FAILURE(error)); }}function getAccounts() { return axios.get('/api/accounts');}</pre> In addition to the above code a redux reducer to store the data in the frontend is needed, and the redux actions must be defined (not shown here, this blog post is about <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> and not about <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux-saga</a> and <a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a>). In <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a>, the above example would be replaced with a one liner (this is what is called “a query” in <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> terminology): <pre>getAccounts: builder.query({ query: () => '/accounts' }),</pre> In addtion to creating the code fetching the data, this one liner also results in redux storage of the fetched data, and redux actions for starting, successful completion and failure. To use the results of data fetched by an <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> in a React component, a hook created from the above one liner is used <pre>export default function Home() { const { data: accounts = [] } = useGetAccountsQuery(); return (Number of accounts: ${accounts.length});}</pre> When the component is rendered an HTTP request is started to fetch the data, and when the data arrives the component will be re-rendered. There is also considerable logic behind caching data and refetching that decides whether to reload the data or not when navigating in and out of the component. My brief experience with RTK query is enough to tell me that RTK query’s reload logic works a lot better than my own home brewed reload logic. One difference from the replaced <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">saga</a>/<a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a> code, was that the reducer where the fetched data is stored, has no default value. So without the “= []” in the example above, accounts would be <code>undefined</code> on the first render. Since the returned data is in the redux state, it is possible to use the useSelector() hook to access the data, but using a regular selector won’t trigger the fetch and reload logic. So as a rule of thumb: always start with the generated hook. It is possible to add arguments to a query <pre>getAccount: builder.query({ query: (username) => '/account/' + username }),</pre> The query argument would then added to the hook used in the react component: <pre>const { data: account = {} } = useGetAccountQuery('steban');</pre> Default for a query is to use HTTP GET, but using e.g. POST is simple and still an one-liner <pre>postAccountAdminstatus: builder.query({ query: body => ({ url: '/account/adminstatus', method: 'POST', body }) }),</pre> The “body” argument needs to be possible to translate into JSON, to be sent as the POST body (and in my experience it is best to make the POSTed JSON a JSON object). <pre>const { data: adminStatus } = usePostAccountAdminstatusQuery({ username: 'steban' });</pre> Queries are for fetching data only. Even if a POST is used a query shouldn’t be used on an endpoint that modifies data on the backend. To modify data you use a mutation, and a mutation can also be a one-liner <pre>postAccountModify: builder.mutation({ query: body => ({ url: '/account/modify', method: 'POST', body }) }),</pre> The usage if the mutation hook is a little bit more complex than the query hook: <pre>const { data: account = {} } = useGetAccountQuery('steban');const [ postAccountModify ] = usePostAccountModifyMutation();const onSaveButtonClicked = async () => await postAccountModify(account);</pre> I.e.: <ol><li>The mutation function is picked out of the hook return value</li><li>Then an async lambda is created using that function to post the return value</li><li>The account value is used in the form elements</li><li> The onSaveButtonClicked is used in <pre><button onClick={onSaveButtonClicked}>Save account</button></pre> </li></ol> After updating data in the server, you would like the redux data updated with the new values. The simplest way to get updated redux data, is to trigger a reload of the query that fetched the data in the first place. To trigger a reload, put a tag on the query that should be reloaded: <pre>getAccounts: builder.query({ query: () => '/accounts', providesTags: ['Accounts'] }),</pre> and then invalidate that tag after POSTing a mutation: <pre>postAccountModify: builder.mutation({ query: body => ({ url: '/account/modify', method: 'POST', body }), invalidatesTags: ['Accounts'],}),</pre> The getAccounts query will be re-run and components with the <code>useGetAccountsQuery()</code> hook will be re-rendered. That if the accounts had already been loaded by a hook in a react component, it isn’t neccessarily reloaded the next time the component is loaded, so without the invalidation, navigating to the component might show the old data. But using invalidation of tags makes everything works smoothly and makes the data be updated on visit. If the return from the mutation contains the the updated data, there is no need to make an invalidation. Then the redux storage of the query can be updated with the mutation return: <pre>postAccountModify: builder.mutation({ query: body => ({ url: '/account/modify', method: 'POST', body }), async onQueryStarted(body, { dispatch, queryFulfilled }) { try { const { data: accountsAfterAccountModify } = await queryFulfilled; dispatch(api.util.updateQueryData('getAccounts', undefined, () => accountsAfterAccountModify)); } catch {} },}),</pre> The <code>await queryFulfilled</code> in <code>onQueryStarted()</code> waits for a successful mutation return and then then dispatches a redux action that replaces the results of a query The tricky bit, when replacing query values in this way, is argument 2 of the <code>updateQueryData()</code> redux action creator, which is <code>undefined</code> in the above example. If the query had an argument (e.g. the username), the replacement needs to have the same value. If not, there is no replacement and no error message. In this case the query has no argument, and then <code>undefined</code> is used. The queries and mutations in my converted projects all live in a single file api.js on the top and all look a bit like this: <pre>import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';export const api = createApi({ reducerPath: 'api', baseQuery: (...args) => { const api = args[1]; const basename = api.getState().basename; return fetchBaseQuery({ baseUrl: basename + '/api' })(...args); }, endpoints: (builder) => ({ getAccounts: builder.query({ query: () => '/accounts' }), getAccount: builder.query({ query: (username) => '/account/' + username }), postAccountAdminstatus: builder.query({ query: body => ({ url: '/account/adminstatus', method: 'POST', body }) }), postAccountModify: builder.mutation({ query: body => ({ url: '/account/modify', method: 'POST', body }), async onQueryStarted(body, { dispatch, queryFulfilled }) { try { const { data: accountsAfterAccountModify } = await queryFulfilled; dispatch(api.util.updateQueryData('getAccounts', undefined, () => accountsAfterAccountModify)); } catch {} }, }), }),});export const { useGetAccountsQuery, useCetAccountQuery, usePostAccountAdminstatusQuery, usePostAccountModifyMutation,} = api;</pre> I.e. <ol><li>The <code>reducerPath</code> is the top level path of the api’s reducer slice in the redux state</li><li>The <code>baseQuery</code> sets the base path prefix for all API calls, in this case it is the value of ‘/api’ prefixed by redux state value <code>basename</code></li><li>The <code>endpoints</code> contains the specification for the queries and mutations</li><li>All mutations are exported at the end for ease of use in the</li></ol> For those who like looking at example code, here is the “api.js” of some React web applications converted from <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">saga</a>/<a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a> to <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a>: applicationdescription<a href="https://github.com/steinarb/handlereg/blob/b038efc51fcbb77f563bb9babe8253bb14a03223/handlereg.web.frontend/src/main/frontend/src/api.js" rel="nofollow noopener" target="_blank">handlereg</a>A groceries tracker and statistics app<a href="https://github.com/steinarb/sampleapp/blob/a77c5f038d6a0bd2a460685c71d77299ca881ba4/sampleapp.web.frontend/src/main/frontend/src/api.js" rel="nofollow noopener" target="_blank">sampleapp</a>A template application for React web applications with jersey backend and PostgreSQL database set up with liquibase<a href="https://github.com/steinarb/oldalbum/blob/4714edeacfc7210c07053a66c90d03ae2ef2901b/oldalbum.web.frontend/src/main/frontend/src/api.js" rel="nofollow noopener" target="_blank">oldalbum</a>An app wrapping 90-ies albums in 202x web technology<a href="https://github.com/steinarb/ukelonn/blob/77a86ac71af50f1948e8d0558d88c8e45a5f5790/ukelonn.web.frontend/src/main/frontend/api.js" rel="nofollow noopener" target="_blank">ukelonn</a>A weekly allowance app<a href="https://github.com/steinarb/authservice/blob/132a1242728bf8c251a36cb74492349eb0bbbd90/authservice/authservice.web.users.frontend/src/main/frontend/src/api.js" rel="nofollow noopener" target="_blank">authservice</a>A simple user, role and permission manager for <a href="https://shiro.apache.org/" rel="nofollow noopener" target="_blank">Apache Shiro</a> Adding RTK query to the redux store The api object needs to be added to the reducer: <pre>import { combineReducers } from 'redux';import { createReducer } from '@reduxjs/toolkit';import { api } from '../api';export default (basename) => combineReducers({ [api.reducerPath]: api.reducer, basename: createReducer(basename, (builder) => builder),});</pre> The exported function is a reducer creator that can be used to create a redux store state with two values: <ol><li>api which is a redux slice containing all state related to network communication and dowloaded results</li><li>basename which is a string value holding the react application’s basepath</li></ol> The creator function can be used to create a redux store: <pre>import rootReducer from './reducers';import { api } from './api';import listeners from './listeners';// Calculate the basename based on the URL of the vite assets directoryconst baseUrl = Array.from(document.scripts).map(s => s.src).filter(src => src.includes('assets/'))[0].replace(/\/assets\/.*/, '');const basename = new URL(baseUrl).pathname;const store = configureStore({ reducer: rootReducer(basename), middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware).prepend(listeners.middleware),});</pre> First we calculate the application’s basepath from the vite artifact the code is loaded from, then a store is created with a reducer consisting of api and basename, and then two middlewares are added: api and listener “What is listeners?” you ask at this point. I am glad you asked! Check out the next section. For those who like looking at example code, some example redux store setups for <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> <a href="https://redux-toolkit.js.org/api/createListenerMiddleware" rel="nofollow noopener" target="_blank">and RTK listener</a>: appreducersredux store setuphandlereg<a href="https://github.com/steinarb/handlereg/blob/b038efc51fcbb77f563bb9babe8253bb14a03223/handlereg.web.frontend/src/main/frontend/src/reducers/index.js" rel="nofollow noopener" target="_blank">reducers/index.js</a><a href="https://github.com/steinarb/handlereg/blob/b038efc51fcbb77f563bb9babe8253bb14a03223/handlereg.web.frontend/src/main/frontend/src/index.js#L22" rel="nofollow noopener" target="_blank">top index.js</a>sampleapp<a href="https://github.com/steinarb/sampleapp/blob/a77c5f038d6a0bd2a460685c71d77299ca881ba4/sampleapp.web.frontend/src/main/frontend/src/reducers/index.js" rel="nofollow noopener" target="_blank">reducers/index.js</a><a href="https://github.com/steinarb/sampleapp/blob/a77c5f038d6a0bd2a460685c71d77299ca881ba4/sampleapp.web.frontend/src/main/frontend/src/index.js#L22" rel="nofollow noopener" target="_blank">top index.js</a>oldalbum<a href="https://github.com/steinarb/oldalbum/blob/4714edeacfc7210c07053a66c90d03ae2ef2901b/oldalbum.web.frontend/src/main/frontend/src/reducers/index.js" rel="nofollow noopener" target="_blank">reducers/index.js</a><a href="https://github.com/steinarb/oldalbum/blob/4714edeacfc7210c07053a66c90d03ae2ef2901b/oldalbum.web.frontend/src/main/frontend/src/index.js#L21" rel="nofollow noopener" target="_blank">top index.js</a>ukelonn<a href="https://github.com/steinarb/ukelonn/blob/77a86ac71af50f1948e8d0558d88c8e45a5f5790/ukelonn.web.frontend/src/main/frontend/reducers/index.js#L39" rel="nofollow noopener" target="_blank">reducers/index.js</a><a href="https://github.com/steinarb/ukelonn/blob/77a86ac71af50f1948e8d0558d88c8e45a5f5790/ukelonn.web.frontend/src/main/frontend/index.js#L22" rel="nofollow noopener" target="_blank">top index.js</a>authservice<a href="https://github.com/steinarb/authservice/blob/7e3e2911a888b7f45561b13fd1e3c09d15deacc7/authservice/authservice.web.users.frontend/src/main/frontend/src/reducers/index.js#L25" rel="nofollow noopener" target="_blank">reducers/index.js</a><a href="https://github.com/steinarb/authservice/blob/7e3e2911a888b7f45561b13fd1e3c09d15deacc7/authservice/authservice.web.users.frontend/src/main/frontend/src/index.js#L17" rel="nofollow noopener" target="_blank">top index.js</a> Using RTK listener to perform actions on REDUX actions <a href="https://redux-toolkit.js.org/api/createListenerMiddleware" rel="nofollow noopener" target="_blank">Listener</a> fills the same role as another useful <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">saga</a> role: the ability to listen for redux actions and act on them: <pre>import { createListenerMiddleware } from '@reduxjs/toolkit';import { isFailedRequest } from './matchers';const listeners = createListenerMiddleware();listeners.startListening({ matcher: isFailedRequest, effect: ({ payload }) => { const { originalStatus } = payload || {}; const statusCode = parseInt(originalStatus); if (statusCode === 401 || statusCode === 403) { location.reload(true); // Will return to current location after the login process } }})export default listeners;</pre> This listener listens for failed <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> HTTP calls to the API and checks the status codes for 401 “Needs Authentication” and 403 “Not Authorized” and reloads the app with the current URL to let apache shiro deal with it (refresh the auth and just open this page, pop up login or redirect to unauthorized page). This is “matchers.js” where <code>isFailedRequest</code> is found: <pre>import { isAnyOf } from '@reduxjs/toolkit';import { api } from './api';export const isFailedRequest = isAnyOf( api.endpoints.getAccounts.matchRejected, api.endpoints.getAccount.matchRejected, api.endpoints.postAccountAdminstatus.matchRejected, api.endpoints.postAccountModify.matchRejected,);</pre> For those who prefer looking at example code, example listener.js and matcher.js files can be found here: applisteners definitionmatchershandlereg<a href="https://github.com/steinarb/handlereg/blob/b038efc51fcbb77f563bb9babe8253bb14a03223/handlereg.web.frontend/src/main/frontend/src/listeners.js" rel="nofollow noopener" target="_blank">listeners.js</a> sampleapp<a href="https://github.com/steinarb/sampleapp/blob/a77c5f038d6a0bd2a460685c71d77299ca881ba4/sampleapp.web.frontend/src/main/frontend/src/listeners.js" rel="nofollow noopener" target="_blank">listeners.js</a> oldalbum<a href="https://github.com/steinarb/oldalbum/blob/4714edeacfc7210c07053a66c90d03ae2ef2901b/oldalbum.web.frontend/src/main/frontend/src/listeners.js#L34" rel="nofollow noopener" target="_blank">listeners.js</a> ukelonn<a href="https://github.com/steinarb/ukelonn/blob/77a86ac71af50f1948e8d0558d88c8e45a5f5790/ukelonn.web.frontend/src/main/frontend/listeners.js#L16" rel="nofollow noopener" target="_blank">listeners.js</a><a href="https://github.com/steinarb/ukelonn/blob/77a86ac71af50f1948e8d0558d88c8e45a5f5790/ukelonn.web.frontend/src/main/frontend/matchers.js" rel="nofollow noopener" target="_blank">matchers.js</a>authservice<a href="https://github.com/steinarb/authservice/blob/7e3e2911a888b7f45561b13fd1e3c09d15deacc7/authservice/authservice.web.users.frontend/src/main/frontend/src/listeners.js" rel="nofollow noopener" target="_blank">listeners.js</a><a href="https://github.com/steinarb/authservice/blob/7e3e2911a888b7f45561b13fd1e3c09d15deacc7/authservice/authservice.web.users.frontend/src/main/frontend/src/matchers.js" rel="nofollow noopener" target="_blank">matchers.js</a> Using RTK queries’ successful loads in other reducers It is possible to use the successful completion of a mutation to clear reducers backing forms: <pre>import { createReducer } from '@reduxjs/toolkit';import { SELECT_STORE } from '../actiontypes';import { api } from '../api';const defaultState = { storeId: -1, storename: '', gruppe: 2,};export default const storeReducer = createReducer(defaultState, builder => { builder .addCase(SELECT_STORE, (state, action) => action.payload) .addMatcher(api.endpoints.postNewstore.matchFulfilled, () => ({ ...defaultState })) .addMatcher(api.endpoints.postModifystore.matchFulfilled, () => ({ ...defaultState }));});</pre> Here both the completion of a successful postNewstore mutation and a successful postModifystore mutation will set the reducer to its default state (and clear the forms backed by the redux state value). Note the use of <code>addMatcher()</code> rather than <code>addCase()</code> to matche the actions. All <code>matchFulfilled</code> actions have the same redux type, so traditional redux type matching won’t work. But the matchers provided by the api object can be used instead. Dependent queries A common requirement is that one REST call needs the value of another value before being called. For this “dependent queries” in RTK query can be used: <pre>export default function Home() { const { data: overview = {}, isSuccess: overviewIsSuccess } = useGetOverviewQuery(); const { data: purchases = [] } = useGetPurchasesQuery(overview.accountid, { skip: !overviewIsSuccess }); ...</pre> The above example the getPurchases query needs an account id that can be found in the results of the getOverview query. The <a href="https://redux-toolkit.js.org/rtk-query/usage/queries#query-hook-options" rel="nofollow noopener" target="_blank">“skip” property</a> of the query option object to <code>useGetPurchasesQuery()</code> prevents <code>useGetPurchasesQuery()</code> from being executed until <code>useGetOverviewQuery()</code> has completed successfully. Converting apps For those preferring to look at code, here are the diffs from converting from <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux</a>/<a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a> to <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK queries</a> and <a href="https://redux-toolkit.js.org/api/createListenerMiddleware" rel="nofollow noopener" target="_blank">RTK listeners</a>: appDescription<a href="https://github.com/steinarb/handlereg/commit/6594b9c12072655286758192a57203a73f31b072" rel="nofollow noopener" target="_blank">handlereg</a>A groceries tracker and statistics app<a href="https://github.com/steinarb/sampleapp/commit/a77c5f038d6a0bd2a460685c71d77299ca881ba4" rel="nofollow noopener" target="_blank">sampleapp</a>A template application for React web applications with jersey backend and PostgreSQL database set up with liquibase<a href="https://github.com/steinarb/oldalbum/commit/568d803ad87ff37253ae0dca370c81b1f30615af" rel="nofollow noopener" target="_blank">oldalbum</a>An app wrapping 90-ies albums in 202x web technology<a href="https://github.com/steinarb/ukelonn/commit/2aba9a7103b0f632cc24a693840faa2d28c40dbf" rel="nofollow noopener" target="_blank">ukelonn</a>A weekly allowance app<a href="https://github.com/steinarb/authservice/commit/cb8473ffd9d0a138e2f6428d61339cdf9f9cc1f2" rel="nofollow noopener" target="_blank">authservice</a>A simple user, role and permission manager for <a href="https://shiro.apache.org/" rel="nofollow noopener" target="_blank">Apache Shiro</a> Reduction of JavaScript source code size for the various apps (source code line numbers from <a href="https://github.com/AlDanial/cloc?tab=readme-ov-file#cloc" rel="nofollow noopener" target="_blank">cloc</a> run before and after the conversion): appsize reduction in %size reduction in <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/lines/" target="_blank">#lines</a>handlereg34%674sampleapp32%359oldalbum14%608ukelonn25%1211authservice31%841 Summing up the numbers from doing the conversion <ol><li>A 14% to 35% reduction of JavaScript code of the apps (with lots of boilerplate gone). The package with lowest percentage has a number of lines reduction on par with the rest of the “real” applications</li><li>No noticable difference in dependencies size even though I was already using RTK and got rid of <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux-saga</a> and <a href="https://axios-http.com/" rel="nofollow noopener" target="_blank">axios</a></li><li>No significant difference in vite build artifact size (even an increase in one case) (numbers can be provided on request)</li></ol> As said at the start, the obsoletion of <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux-saga</a> made doing this change a non-brainer for me. But losing all of the boiler plate around network requests made the applications easier to read and understand and maintain. And the logic around lazy loading, reloads and caching of data is a lot better than my home-brewed redux-router powered logic. I’m not opposed to learning new stuff, but I can be quite reluctant to let go of stuff I like, and I was really happy about <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">redux saga</a> as outlined in <a href="http://steinar.bang.priv.no/?p=556" rel="nofollow noopener" target="_blank">Yep, I’m still using redux</a>. So did I lose anything in this conversion? Downsides are: <ol><li>Harder to examine data loaded by <a href="https://redux-toolkit.js.org/rtk-query/overview" rel="nofollow noopener" target="_blank">RTK query</a> in the <a href="https://github.com/reduxjs/redux-devtools?tab=readme-ov-file#redux-devtools" rel="nofollow noopener" target="_blank">redux devtools</a> (but still possible)</li><li>More complex react components:<ol><li> prior this change, redux served up data ready for consumption in the components and with defaults, i.e. this <pre>const butikker = useSelector(state => state.butikker);</pre> is simpler than this: <pre>import { useGetButikkerQuery } from '../services/butikker';... const { data: butikker = [] } = useGetButikkerQuery();</pre> </li><li>Prior to this change, gathering the data for a save to the back end took place in a <a href="https://redux-saga.js.org/" rel="nofollow noopener" target="_blank">saga</a>, so there was no need to clutter up the component with data not used in the actual render</li></ol></li><li>It’s kinda hard (but not impossible) to use the loaded data as backing storage for the edit form, and then save back from the data. The assumption is that one is to use something like useState() for this, but I don’t wish to do that</li></ol> But putting stuff back in the react components makes fewer places to look for stuff and makes my react component look more similar to others’ react components, so maybe this isn’t so bad after all…? Where to go next? I startet using <a href="https://redux-toolkit.js.org/" rel="nofollow noopener" target="_blank">Redux ToolKit (RTK)</a> back in 2019. I quickly figured that <a href="https://redux-toolkit.js.org/api/createReducer" rel="nofollow noopener" target="_blank">createReducer()</a> and <a href="https://redux-toolkit.js.org/api/createAction" rel="nofollow noopener" target="_blank">createAction()</a> could make my existing reducers and redux action creation more robust. I tried using <a href="https://redux-toolkit.js.org/api/createSlice" rel="nofollow noopener" target="_blank">redux slices</a> at that point in time, but since I had to mix the autocreated redux action with manually created redux actions to trigger REST API operations and handle REST API errors, I figured that redux slices was more work than useful. And I later also landed on the “flattened redux state approach” outlined in <a href="http://steinar.bang.priv.no/?p=556" rel="nofollow noopener" target="_blank">Yep, I’m still using redux</a> (see that article for the reasoning) that didn’t fit well with slices, so I dropped it back then. But with RTK query I no longer have to manually create actions to start API operations or handle errors, since these are created when creating queries or mutations, so maybe it is time to give redux slices a new try…? <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/css/" target="_blank">#css</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/dom/" target="_blank">#dom</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/html/" target="_blank">#html</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/lines/" target="_blank">#lines</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/react/" target="_blank">#react</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/reactjs/" target="_blank">#reactjs</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/redux/" target="_blank">#redux</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/redux_saga/" target="_blank">#reduxSaga</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/redux_toolkit/" target="_blank">#reduxToolkit</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://steinar.bang.priv.no/tag/saga/" target="_blank">#saga</a>

JSDev SpaceRedux Tutorial: Master State Management from Scratch <a href="https://jsdev.space/mastering-redux/" rel="nofollow noopener" translate="no" target="_blank">https://jsdev.space/mastering-redux/</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.social/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a>

Abdullah🚀 Understanding React.js Architecture: A Deep Dive into State Management with Redux and Saga! 🎯<a href="https://mastodon.social/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a> <a href="https://mastodon.social/tags/Redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#Redux</a> <a href="https://mastodon.social/tags/ReduxSaga" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReduxSaga</a> <a href="https://mastodon.social/tags/StateManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#StateManagement</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#Programming</a> <a href="https://mastodon.social/tags/Tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tech</a> <a href="https://mastodon.social/tags/FrontendDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontendDevelopment</a>

Caravana BluesSimplifying the use of Redux in complex projects. <a href="https://chat-to.dev/post?id=clNsaWl3YXAyVkV6NGhJK3c1NHhIdz09&redirect=/new" rel="nofollow noopener" translate="no" target="_blank">https://chat-to.dev/post?id=clNsaWl3YXAyVkV6NGhJK3c1NHhIdz09&redirect=/new</a> <a href="https://mastodon.social/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#programming</a> <a href="https://mastodon.social/tags/webdeveloper" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdeveloper</a> Take an active part in our community. Help our site grow

:rss: Qiita - 人気の記事2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 <a href="https://qiita.com/suin/items/e2df562b0c2be7e2a123?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items" rel="nofollow noopener" translate="no" target="_blank">https://qiita.com/suin/items/e2df562b0c2be7e2a123?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items</a><a href="https://rss-mstdn.studiofreesia.com/tags/qiita" class="mention hashtag" rel="nofollow noopener" target="_blank">#qiita</a> <a href="https://rss-mstdn.studiofreesia.com/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> <a href="https://rss-mstdn.studiofreesia.com/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://rss-mstdn.studiofreesia.com/tags/jotai" class="mention hashtag" rel="nofollow noopener" target="_blank">#jotai</a> <a href="https://rss-mstdn.studiofreesia.com/tags/zustand" class="mention hashtag" rel="nofollow noopener" target="_blank">#zustand</a> <a href="https://rss-mstdn.studiofreesia.com/tags/TanStackQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#TanStackQuery</a>

Jobs for DevelopersMetabase is hiring Software Engineer (Frontend)🔧 <a href="https://mastodon.world/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.world/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> 🌎 Remote ⏰ Full-time 🏢 MetabaseJob details <a href="https://jobsfordevelopers.com/jobs/software-engineer-frontend-at-metabase-com-may-11-2020-a70ec6?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/software-engineer-frontend-at-metabase-com-may-11-2020-a70ec6?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

GetNextJsThemes🚀 Looking to streamline your Next.js project setup? Check out React Redux Hooks Starter Demo!✅ Pre-built configurations ✅ Optimized file structure ✅ Redux state management with hooks Perfect for developers who want to hit the ground running!<a href="https://mastodon.social/@nezzRX" class="u-url mention" rel="nofollow noopener" target="_blank">@nezzRX</a> <a href="https://getnextjsthemes.com/product/react-redux-hooks-starter-demo" rel="nofollow noopener" translate="no" target="_blank">https://getnextjsthemes.com/product/react-redux-hooks-starter-demo</a><a href="https://mastodon.social/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> <a href="https://mastodon.social/tags/Redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#Redux</a> <a href="https://mastodon.social/tags/NextJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#NextJS</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/NextJsThemes" class="mention hashtag" rel="nofollow noopener" target="_blank">#NextJsThemes</a> <a href="https://mastodon.social/tags/LandingPage" class="mention hashtag" rel="nofollow noopener" target="_blank">#LandingPage</a> <a href="https://mastodon.social/tags/Templates" class="mention hashtag" rel="nofollow noopener" target="_blank">#Templates</a> <a href="https://mastodon.social/tags/nextjstemplates" class="mention hashtag" rel="nofollow noopener" target="_blank">#nextjstemplates</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#coding</a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdesign</a>

Jan :rust: :ferris:All these "state management" solutions of the "modern web" like <a href="https://floss.social/tags/Redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#Redux</a>, Zustand or whatever try to solve state management in UI apps by introducing unfathomable amount of complexity......when in reality all you need is <a href="https://floss.social/tags/Bevy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Bevy</a>'s <a href="https://floss.social/tags/ECS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ECS</a>. ¯\_(ツ)_/¯✨ <a href="https://floss.social/tags/GUI" class="mention hashtag" rel="nofollow noopener" target="_blank">#GUI</a> <a href="https://floss.social/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://floss.social/tags/StateManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#StateManagement</a> <a href="https://floss.social/tags/DataOrientedDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#DataOrientedDesign</a> <a href="https://floss.social/tags/DoD" class="mention hashtag" rel="nofollow noopener" target="_blank">#DoD</a>

Still Mad About CD Prices<a href="https://infosec.exchange/tags/silentSunday" class="mention hashtag" rel="nofollow noopener" target="_blank">#silentSunday</a> <a href="https://infosec.exchange/tags/stillenSonntag" class="mention hashtag" rel="nofollow noopener" target="_blank">#stillenSonntag</a> <a href="https://infosec.exchange/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://infosec.exchange/tags/twice" class="mention hashtag" rel="nofollow noopener" target="_blank">#twice</a> <a href="https://infosec.exchange/tags/YouCantStopMe" class="mention hashtag" rel="nofollow noopener" target="_blank">#YouCantStopMe</a>

Jobs for DevelopersSeamless.AI is hiring Senior Software Engineer, Marketing - Remote US🔧 <a href="https://mastodon.world/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.world/tags/aws" class="mention hashtag" rel="nofollow noopener" target="_blank">#aws</a> <a href="https://mastodon.world/tags/json" class="mention hashtag" rel="nofollow noopener" target="_blank">#json</a> <a href="https://mastodon.world/tags/jwt" class="mention hashtag" rel="nofollow noopener" target="_blank">#jwt</a> <a href="https://mastodon.world/tags/postgresql" class="mention hashtag" rel="nofollow noopener" target="_blank">#postgresql</a> <a href="https://mastodon.world/tags/seniorengineer" class="mention hashtag" rel="nofollow noopener" target="_blank">#seniorengineer</a> 🌎 United States ⏰ Full-time 🏢 Seamless.AIJob details <a href="https://jobsfordevelopers.com/jobs/senior-software-engineer-marketing-remote-us-at-seamless-ai-nov-8-2024-5a2442?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/senior-software-engineer-marketing-remote-us-at-seamless-ai-nov-8-2024-5a2442?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

mb bakerMidnights and some other delights <a href="https://mastodon.social/tags/tayronto" class="mention hashtag" rel="nofollow noopener" target="_blank">#tayronto</a> <a href="https://mastodon.social/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a>

Jobs for DevelopersMongoDB is hiring Senior Software Engineer, Identity and Access Management🔧 <a href="https://mastodon.world/tags/csharp" class="mention hashtag" rel="nofollow noopener" target="_blank">#csharp</a> <a href="https://mastodon.world/tags/cplusplus" class="mention hashtag" rel="nofollow noopener" target="_blank">#cplusplus</a> <a href="https://mastodon.world/tags/golang" class="mention hashtag" rel="nofollow noopener" target="_blank">#golang</a> <a href="https://mastodon.world/tags/java" class="mention hashtag" rel="nofollow noopener" target="_blank">#java</a> <a href="https://mastodon.world/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.world/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.world/tags/aws" class="mention hashtag" rel="nofollow noopener" target="_blank">#aws</a> <a href="https://mastodon.world/tags/azure" class="mention hashtag" rel="nofollow noopener" target="_blank">#azure</a> <a href="https://mastodon.world/tags/gcp" class="mention hashtag" rel="nofollow noopener" target="_blank">#gcp</a> <a href="https://mastodon.world/tags/mongodb" class="mention hashtag" rel="nofollow noopener" target="_blank">#mongodb</a> <a href="https://mastodon.world/tags/seniorengineer" class="mention hashtag" rel="nofollow noopener" target="_blank">#seniorengineer</a> 🌎 New York City, New York ⏰ Full-time 🏢 MongoDBJob details <a href="https://jobsfordevelopers.com/jobs/senior-software-engineer-identity-and-access-management-at-mongodb-com-oct-21-2024-610db1?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/senior-software-engineer-identity-and-access-management-at-mongodb-com-oct-21-2024-610db1?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

HabrTodo-лист на максималках: разбираем архитектуру крупного приложенияВ этой статье я покажу, как устроена многослойная архитектура крупного реактивного web-приложения, и особенности его запуска под Electron. Материал будет полезен, если вы планируете начать свою разработку, хотите попробовать себя в роли архитектора, вас не пугает Shared Workers, Service Workers или, в конце концов, вы хотите это попробовать или разобраться.<a href="https://habr.com/ru/articles/868194/" rel="nofollow noopener" translate="no" target="_blank">https://habr.com/ru/articles/868194/</a><a href="https://zhub.link/tags/Electron" class="mention hashtag" rel="nofollow noopener" target="_blank">#Electron</a> <a href="https://zhub.link/tags/sharedworker" class="mention hashtag" rel="nofollow noopener" target="_blank">#sharedworker</a> <a href="https://zhub.link/tags/worker" class="mention hashtag" rel="nofollow noopener" target="_blank">#worker</a> <a href="https://zhub.link/tags/%D1%82%D0%B0%D0%B9" class="mention hashtag" rel="nofollow noopener" target="_blank">#тай</a> <a href="https://zhub.link/tags/%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4" class="mention hashtag" rel="nofollow noopener" target="_blank">#фронтенд</a> <a href="https://zhub.link/tags/serviceworker" class="mention hashtag" rel="nofollow noopener" target="_blank">#serviceworker</a> <a href="https://zhub.link/tags/s3" class="mention hashtag" rel="nofollow noopener" target="_blank">#s3</a> <a href="https://zhub.link/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://zhub.link/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a>

Jobs for DevelopersMoloco is hiring Frontend Software Engineer I / II🔧 <a href="https://mastodon.world/tags/golang" class="mention hashtag" rel="nofollow noopener" target="_blank">#golang</a> <a href="https://mastodon.world/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.world/tags/angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#angular</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#redux</a> <a href="https://mastodon.world/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.world/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> 🌎 Seoul, South Korea ⏰ Full-time 🏢 MolocoJob details <a href="https://jobsfordevelopers.com/jobs/frontend-software-engineer-i-ii-at-moloco-com-apr-8-2024-202371?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/frontend-software-engineer-i-ii-at-moloco-com-apr-8-2024-202371?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

TECHnicalBeepReact Day Berlin 2024: Build Apps, Not Walls 🚀 – Join the Reactverse!🚀 Join React Day Berlin 2024 by GitNation for talks, networking, & workshops onsite in Berlin or online. Connect & boost your skills!🎟️ Secure your spot today & Get your tickets here: <a href="https://lnkd.in/d-dDA-AH" rel="nofollow noopener" translate="no" target="_blank">https://lnkd.in/d-dDA-AH</a>Read More about <a href="https://mastodon.social/tags/ReactDayBerlin" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactDayBerlin</a>: <a href="https://lnkd.in/ddPaH-Ws" rel="nofollow noopener" translate="no" target="_blank">https://lnkd.in/ddPaH-Ws</a><a href="https://mastodon.social/tags/technicalbeep" class="mention hashtag" rel="nofollow noopener" target="_blank">#technicalbeep</a> <a href="https://mastodon.social/tags/ideasphere" class="mention hashtag" rel="nofollow noopener" target="_blank">#ideasphere</a> <a href="https://mastodon.social/tags/ReactDay" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactDay</a> <a href="https://mastodon.social/tags/ReactDayBerlin2024" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactDayBerlin2024</a> <a href="https://mastodon.social/tags/BuildAppsNotWalls" class="mention hashtag" rel="nofollow noopener" target="_blank">#BuildAppsNotWalls</a> <a href="https://mastodon.social/tags/ReactNative" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactNative</a> <a href="https://mastodon.social/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.social/tags/Remix" class="mention hashtag" rel="nofollow noopener" target="_blank">#Remix</a> <a href="https://mastodon.social/tags/Redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#Redux</a> <a href="https://mastodon.social/tags/Astro" class="mention hashtag" rel="nofollow noopener" target="_blank">#Astro</a> <a href="https://mastodon.social/tags/Million" class="mention hashtag" rel="nofollow noopener" target="_blank">#Million</a> <a href="https://mastodon.social/tags/ReactQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactQuery</a>

GMRaphiBlender schaff ich gerade nicht😆 bin zu dumm. Leg mich auf die Couch. Aber ich bin "on track" für einen opening crawl fertig zu haben am Freitag Abend.Inkscape, GIMP, Blender. <a href="https://rollenspiel.social/tags/pnpde" class="mention hashtag" rel="nofollow noopener" target="_blank">#pnpde</a> <a href="https://rollenspiel.social/tags/ttrpg" class="mention hashtag" rel="nofollow noopener" target="_blank">#ttrpg</a> <a href="https://rollenspiel.social/tags/handouts" class="mention hashtag" rel="nofollow noopener" target="_blank">#handouts</a> <a href="https://rollenspiel.social/tags/props" class="mention hashtag" rel="nofollow noopener" target="_blank">#props</a> <a href="https://rollenspiel.social/tags/YouTube" class="mention hashtag" rel="nofollow noopener" target="_blank">#YouTube</a> <a href="https://rollenspiel.social/tags/StarWars" class="mention hashtag" rel="nofollow noopener" target="_blank">#StarWars</a> <a href="https://rollenspiel.social/tags/CrawlText" class="mention hashtag" rel="nofollow noopener" target="_blank">#CrawlText</a> <a href="https://rollenspiel.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> <a href="https://rollenspiel.social/tags/StarWars" class="mention hashtag" rel="nofollow noopener" target="_blank">#StarWars</a> <a href="https://rollenspiel.social/tags/REUP" class="mention hashtag" rel="nofollow noopener" target="_blank">#REUP</a> <a href="https://rollenspiel.social/tags/REDUX" class="mention hashtag" rel="nofollow noopener" target="_blank">#REDUX</a> <a href="https://rollenspiel.social/tags/SWREUP" class="mention hashtag" rel="nofollow noopener" target="_blank">#SWREUP</a> <a href="https://rollenspiel.social/tags/StarWarsD6" class="mention hashtag" rel="nofollow noopener" target="_blank">#StarWarsD6</a>

GMRaphiGame Balance ist son bisschen egal bei dem Charakter, aber er ist, alles in allem, einem einzelnen "Main Story"-Charakter ein bisschen voraus! <a href="https://rollenspiel.social/tags/StarWars" class="mention hashtag" rel="nofollow noopener" target="_blank">#StarWars</a> <a href="https://rollenspiel.social/tags/ttrpg" class="mention hashtag" rel="nofollow noopener" target="_blank">#ttrpg</a> <a href="https://rollenspiel.social/tags/pnpde" class="mention hashtag" rel="nofollow noopener" target="_blank">#pnpde</a> <a href="https://rollenspiel.social/tags/StarWarsREUP" class="mention hashtag" rel="nofollow noopener" target="_blank">#StarWarsREUP</a> <a href="https://rollenspiel.social/tags/REUP" class="mention hashtag" rel="nofollow noopener" target="_blank">#REUP</a> <a href="https://rollenspiel.social/tags/REDUX" class="mention hashtag" rel="nofollow noopener" target="_blank">#REDUX</a> <a href="https://rollenspiel.social/tags/WEGD6" class="mention hashtag" rel="nofollow noopener" target="_blank">#WEGD6</a> <a href="https://rollenspiel.social/tags/StarWarsD6" class="mention hashtag" rel="nofollow noopener" target="_blank">#StarWarsD6</a>

michabbbAdvanced Image Editing Suite Enhances FLUX.1 Capabilities 🎨🎯 <a href="https://social.vivaldi.net/tags/BlackForestLabs" class="mention hashtag" rel="nofollow noopener" target="_blank">#BlackForestLabs</a> launches <a href="https://social.vivaldi.net/tags/FLUX1" class="mention hashtag" rel="nofollow noopener" target="_blank">#FLUX1</a> Tools suite with four key features: <a href="https://social.vivaldi.net/tags/Fill" class="mention hashtag" rel="nofollow noopener" target="_blank">#Fill</a> for state-of-the-art in/outpainting, <a href="https://social.vivaldi.net/tags/Depth" class="mention hashtag" rel="nofollow noopener" target="_blank">#Depth</a> for structural guidance, <a href="https://social.vivaldi.net/tags/Canny" class="mention hashtag" rel="nofollow noopener" target="_blank">#Canny</a> for edge-based control, and <a href="https://social.vivaldi.net/tags/Redux" class="mention hashtag" rel="nofollow noopener" target="_blank">#Redux</a> for image variations🔬 All tools available in two versions: <a href="https://social.vivaldi.net/tags/opensource" class="mention hashtag" rel="nofollow noopener" target="_blank">#opensource</a> [dev] models on <a href="https://social.vivaldi.net/tags/HuggingFace" class="mention hashtag" rel="nofollow noopener" target="_blank">#HuggingFace</a> and professional variants via <a href="https://social.vivaldi.net/tags/API" class="mention hashtag" rel="nofollow noopener" target="_blank">#API</a>🏆 Benchmarks show FLUX.1 Tools outperforming competitors like <a href="https://social.vivaldi.net/tags/Ideogram" class="mention hashtag" rel="nofollow noopener" target="_blank">#Ideogram</a> and <a href="https://social.vivaldi.net/tags/Midjourney" class="mention hashtag" rel="nofollow noopener" target="_blank">#Midjourney</a> in respective categories🤝 Models accessible through partners including <a href="https://social.vivaldi.net/tags/falai" class="mention hashtag" rel="nofollow noopener" target="_blank">#falai</a>, <a href="https://social.vivaldi.net/tags/Replicate" class="mention hashtag" rel="nofollow noopener" target="_blank">#Replicate</a>, <a href="https://social.vivaldi.net/tags/TogetherAI" class="mention hashtag" rel="nofollow noopener" target="_blank">#TogetherAI</a>, <a href="https://social.vivaldi.net/tags/Freepik" class="mention hashtag" rel="nofollow noopener" target="_blank">#Freepik</a>, and <a href="https://social.vivaldi.net/tags/kreai" class="mention hashtag" rel="nofollow noopener" target="_blank">#kreai</a>💻 Complete documentation, weights, and inference code available on <a href="https://social.vivaldi.net/tags/GitHub" class="mention hashtag" rel="nofollow noopener" target="_blank">#GitHub</a><a href="https://blackforestlabs.ai/flux-1-tools/" rel="nofollow noopener" translate="no" target="_blank">https://blackforestlabs.ai/flux-1-tools/</a>

Recent searches

Search options

Administered by:

Server stats:

#redux