Skip to main content
100%

Gist f4490dceceab7519aec2f3f481752369

✓ Published0🌍 Public
Aamortka
Last edited Feb 13, 2018
Created on Feb 13, 2018

This React example demonstrates a todo-list input form that dispatches an asynchronous action when submitted. The component uses `react-redux`’s `connect` to access the `dispatch` function, and calls `addTodoAsync` (an action creator) with the trimmed input value, logging `'done!'` to the console once the promise resolves. The form prevents default submission, clears the input after dispatch, and disables adding empty entries. The code shows the pattern of binding a Redux action to a user interface event, though it does not render any visualization or charting logic.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 42ff8cbaaacab6e163d98ce5c7eed5ac

This example demonstrates a Redux-based task management flow where users can add todo items either synchronously or asynchronously. It shows how actions like `addTodo`, `setVisibilityFilter`, and `toggleTodo` update the application state, while the async variant fetches a title from the JSONPlaceholder API using `fetch` before dispatching the action. The code uses Redux’s `dispatch` pattern with a thunk-like function to handle asynchronous logic, and it assigns unique IDs via `nextTodoId`. No rendering or visualization library is present; the focus is purely on state management and action creation.

Aamortka
81% 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…

Gist e8f49452a4f5db4f4eae12542e0cad5f

This example demonstrates a Redux-connected React component that renders an explore page. It shows how the component receives explore data from the application state and a category listing derived through a selector, while also exposing an action to fetch explore data. The code uses `react-redux`'s `connect` function to map state and dispatch actions, and `bindActionCreators` to wrap the `getExploreData` action. Navigation is handled via a `navigateToLogin` action imported from a navigation module, though the component itself does not display any visual data directly.

Aanosikeosifo
70% match
Loading thumbnail…

Fork of React Test (NW)

A React demonstration showcasing a todo list, an interactive form, and a step counter with conditional button disabling. The page presents a preset todo array, a styled input panel that displays submitted text, and a circular counter that increments or decrements. Built with React 19’s `useState` hook, the form captures submissions via `FormData` from the event target, while the counter buttons disable the decrement action below zero, all styled with custom CSS for hover and active states.

NNita
70% match
Loading thumbnail…

Todos

A todo list application demonstrates building interactive user interfaces with d3-component, using Redux for state management and d3 transitions for enter and exit animations. The interface supports adding, toggling, and filtering todos by visibility status. The code leverages d3-component’s render, create, and destroy lifecycle hooks, with transition calls animating list item size changes, and a key function binding data to DOM elements.

CCurran Kelleher
70% match
Loading thumbnail…

Gist 8420271

This example demonstrates a React-style virtual DOM implementation using the `virtual-dom` library, showcasing a Todo app with animated state updates. The code builds a virtual DOM tree from observable state (via `observ`), renders it to a real DOM element, and uses a diffing algorithm to compute minimal changes between state versions. A requestAnimationFrame loop batches these patches and applies them at 60fps, ensuring smooth UI updates while preserving input focus and other temporary state. The visualization highlights how the virtual DOM approach separates concerns: `h` constructs virtual nodes, `render` creates the initial DOM, `diff` computes changes, and `batch`/`patch` apply them efficiently—all orchestrated with reactive observables and a delegator for events.

Aalessioalex
69% match
Loading thumbnail…

redux-form example - http://insin.github.io/redux-form-example/

This example demonstrates a travel-add form built with React and redux-form, styled using React-Bootstrap. It validates user input—start and end dates, origin, destination, hotel, and car access—with client-side rules like date range checks, and includes a fake submit flow that displays the submitted data as formatted JSON. The visualization highlights redux-form's declarative field binding, validation, and state management through a multi-field form, with a loading state simulated during submission.

AAbhay-Joshi-Git
69% match
Loading thumbnail…

exploring redux form

This example demonstrates a basic React form built with `redux-form`, showing how form state is managed through Redux. The code defines a `SimpleForm` component that uses the `Field` component to bind text inputs for name and email, while the `reduxForm` HOC wraps the component with form configuration. A container component handles the submitted JSON data via a callback. The example highlights the `formReducer` integration in the root reducer, illustrating the library’s core pattern of connecting form fields to Redux state and submitting values as structured JSON.

CCKschneid
68% match