How do I test a reducer that uses redux-side-effects?

Iterate over the generator function and assert each yield value. For example, use `iterable.next()` to check for side effects and state returns, making unit tests straightforward without mocking.

redux-side-effects vs redux-saga: which should I use?

Redux Side Effects centralizes logic in reducers for purity and testability, while redux-saga uses separate sagas for side effects. Choose based on whether you prefer logic co-location or a more declarative, saga-based approach.

Can I use redux-side-effects with React hooks?

Yes, it integrates with any Redux setup, so you can use hooks like useSelector and useDispatch. However, your reducers must be generator functions, which hooks don't affect.

How to handle async operations like API calls in redux-side-effects?

Define an effect function that performs the async operation and dispatches actions. Yield it using `sideEffect`, and the runtime will execute it after state reduction, as shown in the README example.

Does redux-side-effects support TypeScript?

It should work with TypeScript, but you might need to provide or find type definitions since it's a smaller library. Check DefinitelyTyped or create custom types for full support.

What's the learning curve for redux-side-effects if I know Redux?

If you're familiar with ES6 generators and Redux, it's relatively easy to pick up. However, understanding generator functions and the yield syntax is essential, which might require additional learning.

Open-Awesome

redux-side-effects

MITJavaScriptv1.0.1

Redux toolset that enables side effects to be declared within reducers using ES6 generators while preserving purity.

GitHub

179 stars8 forks0 contributors

What is redux-side-effects?

Redux Side Effects is a Redux toolset that enables side effects to be declared inside reducers using ES6 generators. It solves the problem of scattering business logic across actions and reducers by keeping side effects within the reducer while maintaining purity. This approach ensures reducers remain testable, hot-reloadable, and free from impure execution.

Target Audience

Redux developers who want to centralize domain logic and side effects, especially those inspired by Elm's architecture or frustrated with middleware like redux-thunk scattering logic.

Value Proposition

Developers choose Redux Side Effects because it keeps side effects declarative and testable within reducers, unlike solutions like redux-thunk that split logic. Its generator-based API is intuitive and integrates seamlessly with existing Redux setups.

Overview

Redux toolset for keeping all the side effects inside your reducers while maintaining their purity.

Use Cases

Best For

Centralizing side effects and domain logic in Redux applications
Writing fully testable Redux reducers with side effects
Adopting Elm-like architecture in Redux projects
Simplifying async flow management without middleware sprawl
Maintaining reducer purity while handling side effects
Composing complex reducer logic with yield*

Not Ideal For

Teams that prefer using established Redux middleware like redux-thunk or redux-saga for async operations
Projects where developers are not familiar with or avoid ES6 generator functions
Applications requiring server-side rendering with minimal JavaScript runtime complexity
Teams wanting to use arrow function syntax extensively in their Redux reducers

Pros & Cons

Pros

Pure Reducers with Effects

Reducers remain deterministic by yielding side effects declaratively, keeping business logic centralized and testable without impure execution.

Easy Unit Testing

Generators allow direct assertion of yielded effects and state changes via iteration, simplifying test suites without extensive mocking.

Backwards Compatibility

Works seamlessly with existing Redux apps via a store enhancer, ensuring no breaking changes and integration with current codebases.

Declarative Effect Management

Side effects are expressed using the `sideEffect` function, making them explicit and easy to reason about in reducer logic.

Reducer Composition

Supports composing reducers with `yield*`, enabling modular and scalable state logic inspired by Elm's architecture.

Cons

Generator Syntax Limitation

Only supports `function*` syntax, not arrow functions, which can be a barrier for developers used to modern ES6+ syntax.

Middleware Integration Complexity

Requires careful ordering when combining with other Redux middlewares, as noted in the FAQ, leading to potential setup headaches.

Small Community and Ecosystem

Compared to alternatives like redux-thunk or redux-saga, it has fewer users, meaning less community support and fewer resources.

Performance Overhead

Using generators introduces runtime overhead that might impact performance-sensitive applications, though often negligible.

Frequently Asked Questions

Related Projects

redux-saga

An alternative side effect model for Redux apps

Thunk middleware for Redux

Stars17,669

Forks1,017

Last commit1 year ago

redux-observable

RxJS middleware for action side effects in Redux using "Epics"

Stars7,805

Forks457

Last commit27 days ago

redux-promise-middleware

Enables robust, simple handling of async action creators in Redux

Stars1,968

Forks182

Last commit2 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub