{"library":"refx","title":"refx Redux Middleware for Side Effects","description":"refx is a Redux middleware designed for managing side effects in applications, last updated in 2018 with version 3.1.1. It offers an alternative to solutions like `redux-thunk` by allowing developers to define side effects as an object of action type keys, with handlers that receive both the dispatched action and the store instance. A core differentiator is its emphasis on keeping Redux actions as plain objects, promoting easier extension and composition compared to thunk-augmented action creators. Despite its unique approach and lightweight footprint (241 bytes gzipped and minified), the package has seen no updates in several years, making its compatibility with recent Redux ecosystem changes, such as Redux Toolkit 2.0 or Redux 5.0, questionable. Its release cadence is effectively non-existent, and it does not ship with TypeScript types, requiring manual declarations for modern TypeScript projects.","language":"javascript","status":"abandoned","last_verified":"Thu Apr 23","install":{"commands":["npm install refx"],"cli":null},"imports":["import refx from 'refx';","const refx = require('refx');","// refx is available globally after script inclusion"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport refx from 'refx';\n\n// A placeholder Redux reducer\nfunction todos(state = [], action) {\n  switch (action.type) {\n    case 'TODO_ADD':\n      return [...state, { id: Date.now(), text: action.todo, completed: false }];\n    case 'TODO_SAVED':\n      console.log('TODO_SAVED action dispatched:', action.todo);\n      return state.map(todo => (todo.id === action.todo.id ? { ...todo, text: action.todo.text } : todo));\n    default:\n      return state;\n  }\n}\n\nconst effects = {\n  TODO_ADD: (action, store) => {\n    console.log(`Intercepted TODO_ADD for todo: ${action.todo}`);\n    // Simulate an API call\n    new Promise(resolve => setTimeout(() => resolve({ id: Date.now(), text: action.todo + ' (saved)' }), 500))\n      .then(todo => {\n        store.dispatch({\n          type: 'TODO_SAVED',\n          todo\n        });\n      });\n  },\n  // You can also add other effects, e.g., for error handling or logging\n  // TODO_ERROR: (action, store) => console.error('Error:', action.error)\n};\n\nfunction configureStore() {\n  return createStore(todos, [], applyMiddleware(refx(effects)));\n}\n\nconst store = configureStore();\n\nconsole.log('Initial state:', store.getState());\n\nstore.dispatch({ type: 'TODO_ADD', todo: 'Learn refx' });\nstore.dispatch({ type: 'TODO_ADD', todo: 'Understand side effects' });\n\n// Since effects are async, state updates from effects will happen later.\n// The initial dispatch only updates the store synchronously.\n// console.log('State after first dispatch (before effect completes):', store.getState());\n\n// You would typically observe state changes via subscriptions or UI frameworks\nstore.subscribe(() => {\n  console.log('Current state:', store.getState());\n});","lang":"javascript","description":"This example demonstrates how to set up `refx` middleware with a basic Redux store. It defines an effect to intercept a `TODO_ADD` action, simulate an asynchronous API call, and then dispatch a `TODO_SAVED` action once the 'save' operation completes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}