Skip to content

Instantly share code, notes, and snippets.

View barbagrigia's full-sized avatar

Vlad Trukhin barbagrigia

View GitHub Profile
// Option 1: a thunk action creator using redux-thunk middleware
function myThunkActionCreator(someValue) {
return (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"});
myAjaxLib.post("/someEndpoint", {data : someValue})
.then(
// Use the (resolve, reject) form of .then() instead of .catch(),
// so that we don't accidentally dispatch REQUEST_FAILED on a reducer error
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
@barbagrigia
barbagrigia / reactiflux-reduceReducers.md
Created April 14, 2018 21:04 — forked from markerikson/reactiflux-reduceReducers.md
Reactiflux reduceReducers discussion

[8:19 PM] Rtransat: What is the best way to set data in reducer after we put other data in other reducer?

For example I have a list of items in a reducer:

[{  
amount: 10  
}, {amount: 20}]  

And another reducer with the value null by default and after fetching the first data in the store I want to calculate the sum of the total amount
[8:19 PM] Rtransat: and put it in a store too

[8:27 PM] cquill: @acemarke Right, so many portions of the UI will be connected. But does each connected portion typically get its own container component? Seems verbose and redundant to have the following for each CRUD resource: UserList, UserListContainer, UserView, UserViewContainer, UserEdit, UserEditContainer, UserNew, UserNewContainer. Is there a simpler way?
[9:56 PM] acemarke: @cquill : this leads into one of my favorite (?) semi-rants, and one that I apparently need to write down so I can paste it
[9:57 PM] acemarke: A "container" component is simply any component whose primary job is to fetch data from somewhere, and pass that data on to its children
[9:58 PM] acemarke: With Redux, the wrapper components generated by connect are "container" components, since their job is to extract data from the Redux store
[9:58 PM] acemarke: I generally dislike the somewhat-common approach of trying to divide everything into a "components" folder and a "containers" folder
[9:59 P

@barbagrigia
barbagrigia / ReactControlledInputWithState.jsx
Created April 14, 2018 21:03 — forked from markerikson/ReactControlledInputWithState.jsx
React controlled input with internal state example
class ControlledInputWithInternalState extends Component {
constructor(props) {
super(props);
this.state = {
isValid : true,
value : props.value
};
}
@barbagrigia
barbagrigia / reactiflux-actions-action-creators-mapDispatch.md
Created April 14, 2018 21:03 — forked from markerikson/reactiflux-actions-action-creators-mapDispatch.md
Reactiflux chat: Dispatching actions, using reducers, action creators, and mapDispatchToProps

[10:39 AM] infected mushroom: Is this analogy correct?

Can we say that the store in the Redux app is like a database?
mapStateToProps is used to retrive (read) the information from the database where as
mapDispatchToProps is used to write the information in the same database?
[10:59 AM] infected mushroom: Okay, I am confused now

On official docs it says

Actions are payloads of information that send data from your application to your store

@barbagrigia
barbagrigia / reactiflux-package-deps-offline-mirrors.md
Created April 14, 2018 21:03 — forked from markerikson/reactiflux-package-deps-offline-mirrors.md
Reactiflux discussion: handling package dependencies with offline mirrors

[1:11 PM] jswannabe: Question regarding npm. I had a debate last week with someone at work regarding npm update. I don't like running it since the latest updates from 3rd party libs/modules that my webapp might get might break. There is another dev who's on my side. However, there is another dev that likes running npm update. Our boss likes it too and says that we should always get the latest changes from 3rd parties. For me, I'd rather run npm update on a test branch first and if it's been proven not to break our app, that's the time we'll introduce the new version. It's been an ongoing debate for months now, LMAO! How are you folks doing it at work?(edited)
[1:14 PM] acemarke: My personal suggestion would be that you don't just randomly update libs
[1:14 PM] acemarke: I would agree it's better to do it on a test branch first
[1:14 PM] mruzekw: If they respect semver, there shouldn't be breaking changes? I could be wrong
[1:15 PM] acemarke: that's the theory, but in practice, thi

@barbagrigia
barbagrigia / reselect-selectors-memoization.md
Created April 14, 2018 21:02 — forked from markerikson/reselect-selectors-memoization.md
Reselect selectors and memoization explanation

[9:39 PM] suark: A selector is a function that takes only 1 param which is state and it returns data.
[9:40 PM] maladr0it: in my case it can't function with only that information
[9:40 PM] maladr0it: so i should perhaps rethink
[9:40 PM] maladr0it: it needs to know what chat to get messages for
[9:40 PM] acemarke: @suark: a selector can take any number of arguments
[9:40 PM] acemarke: both in general, and with Reselect specifically
[9:41 PM] suark: I thought createselect returns a function that only takes state
[9:41 PM] acemarke: nope
[9:41 PM] acemarke: in fact, it calls all "input selectors" with all the arguments you pass in
[9:41 PM] maladr0it: only taking state sounds very limiting.. perhaps i should read about what selectors actually are used for

@barbagrigia
barbagrigia / NotificationManager.jsx
Created April 14, 2018 21:02 — forked from markerikson/NotificationManager.jsx
React / Redux / Semantic-UI toast notifications implementation
import React, {Component} from "react";
import {connect} from "react-redux";
import _ from "lodash";
import { Message } from "semantic-ui-react";
import {Portal} from 'react-portal';
import {selectNotifications} from "./notificationSelectors";
import {dismissNotification} from "./notificationActions";
@barbagrigia
barbagrigia / reduxRandomExample.js
Created April 14, 2018 21:01 — forked from markerikson/reduxRandomExample.js
Redux random number middleware with resumable state
import {createStore, applyMiddleware} from"redux";
import {randomMiddleware, higherOrderRandomReducer} from "./reduxRandomMiddleware";
function randomInt(prng, lowest, highest) {
return lowest + Math.floor(prng() * (highest - lowest + 1));
}
function counterReducer(state = 0, action) {
switch(action.type) {
case "INCREMENT" : {
@barbagrigia
barbagrigia / acemarke-jravaj-connect-discussion.md
Created April 14, 2018 21:01 — forked from markerikson/acemarke-jravaj-connect-discussion.md
Reactiflux #redux discussion: top-down single connect vs multiple lower connects

May 12, 2016

[8:23 PM] jrajav:: Heya. I'm wondering what the function of components really are. Just don't fully understand - why not just pass in the state with something like store.subscribe( () => render( , document.getElementById('root') ) ) ?

[8:24 PM] jrajav:: Passing in dispatch functions as well

[8:24 PM] jrajav:: Then, split apart the state as appropriate further down for each subcomponent

[8:25 PM] jrajav:: If all of the components are pure, stateless functional components this approach should still be just as performant, right?