Action, reducer and store drills

100%

Action, reducer and store drills

✓ Published0🌍 Public

Last edited Oct 11, 2017

Created on Oct 11, 2017

This example demonstrates how to visualize Redux state management through interactive “drill” views. It shows a live, force-directed graph of actions, reducers, and store state, with nodes and links updating in real time as actions dispatch. The visualization uses `d3.forceSimulation` for layout and `d3.select` with data joins to render transitions. A CRUD reducer example (from the Glitch project “tulip-buffet”) provides the underlying state logic, while a second file (gistfile1.txt) defines internationalization (i18n) state for language-specific labels. The code wires Redux store subscriptions to D3 updates, animating node positions via `transition.attrTween`.

AI-generated description

Similar vizzes

Loading thumbnail…

React Redux Drills

React Redux Drills pairs two interactive Glitch projects that demonstrate state management in React with Redux. The first, “Interest Calculator I: Connecting,” shows a compound-interest form wired through Redux’s `connect` and `dispatch` to update a computed total. The second, “Interest Calculator II: Dispatching,” builds on this by adding explicit action creators and reducer logic to handle user input. Both examples render plain HTML inputs and result text, relying on Redux’s `createStore`, `Provider`, and `useSelector`/`useDispatch` hooks (or their class-based equivalents) to manage and propagate state changes. The code is sourced from a public gist by arcox80, with live editable versions hosted on Glitch.

Aarcox80

76% match

Loading thumbnail…

Redux + D3 in the browser

A Redux store manages a counter and iteration count, displayed as a text label in an SVG. The D3 v4 code renders the SVG and two buttons, while Redux dispatches `INCREMENT`, `DECREMENT`, `ZERO`, and `RESET` actions. A `d3.interval` timer randomly dispatches increment or decrement actions every 100 milliseconds. The store’s `subscribe` method updates the text element in response to state changes, demonstrating a pure Redux pattern for UI synchronization without a view-binding library.

PPhilippe Rivière

73% match

Loading thumbnail…

redux-scc-v1-blog-double-dispatch

This example demonstrates the Redux state-management pattern for managing and visualizing multiple data updates in a JavaScript application. The code shows two consecutive `store.dispatch()` calls that trigger separate state changes: one replacing a string value and another pushing a number into an array. It highlights how Redux handles action dispatching and state transitions, using the Redux store API alongside action creators defined in the `actions` object. The visualization would typically reflect the updated state after each dispatch, showing the sequential effect of double actions on the rendered data.

TTheComfyChair

71% match

Loading thumbnail…

Gist 0377e5f0142844927575a50b922f67ed

This example shows a Redux state-management structure that combines reducers for event data, explore data, and navigation data into a single root reducer. The code uses the `combineReducers` API from the Redux library to merge three feature-specific reducers—imported from `features/events/reducers`, `features/explore/reducers`, and `navigation/reducers`—into one exported object. It does not render any visualization directly; instead, it defines the data-flow backbone that organizes state for an application, likely feeding charts or maps that consume these event, exploration, and navigation datasets. The source is a gist authored by anosikeosifo.

Aanosikeosifo

71% match

Loading thumbnail…

Gist 7dc4898b7ffc460291957e8784871131

This example demonstrates a React application that integrates Redux for state management with asynchronous actions via Redux Thunk. It sets up a centralized store using `createStore`, applies the `thunk` middleware, and connects the app through a `Provider` component. The root component is rendered into the DOM with `react-dom`’s `render` method, using `window.__REDUX_DEVTOOLS_EXTENSION__` for debugging. The code shows how to wire together React, Redux, and Redux Thunk, though it does not display any visual data or charting logic, focusing solely on the application’s foundational architecture.

Aamortka

71% match

Loading thumbnail…

A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series

This example demonstrates the core concepts of @ngrx/store, a state management library for Angular built on RxJS. It explains the roles of reducers, actions, and the single application store, showing how immutable state flows through a centralized dispatcher and BehaviorSubject. The code highlights APIs such as `scan` for aggregating state, `map` for slicing state, `distinctUntilChanged` for managing updates, and `combineLatest` with `withLatestFrom` for projecting state into views. The accompanying walkthrough applies these patterns to a sample application, including middleware, meta-reducers, and state rehydration on bootstrap.

Aackuser

68% match

Loading thumbnail…

Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)

This example demonstrates a minimal, single-file implementation of Redux’s core API, including `createStore`, `combineReducers`, `bindActionCreators`, and `applyMiddleware`. It shows how these functions work together to manage state and dispatch actions, with `subscribe` for listener registration and `replaceReducer` for hot-swapping. The code defines the store’s logic directly, using plain JavaScript functions like `mapValues` and `compose` to replicate the original library’s behavior without its validation checks. The listing is a gist by Stroked, intended as a concise educational reference for Redux’s internals.

AAjayyy

68% match

Loading thumbnail…

Gist 56b9c00fb86d733bf6f97d3a27ecb5fd

This example shows a Redux middleware-style logger that visualizes state changes in a React or Redux application. The code exports a `logger` function that wraps a reducer and, for each dispatched action, logs a collapsible group with the action type, the previous state, the action object, and the next state, using `console.group`, `console.log`, and styled `%c` format specifiers with color codes for readability. It relies on the Redux reducer pattern, where `currentState` is implicitly captured, and returns the next state unchanged after logging. No external visualization library is used; the rendering approach is plain browser console output.

Aackuser

67% match