Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium

  • In MobX it is easy to structure your stores in a tree-like manner so that at any point you can view the entire state of your application.
  • Additionally, by using MobX in strict mode, you are forced to make any mutations to your state in actions.
  • The combination of a single store, strict mode, and the excellent mobx-react-devtools help give back some of the predictability and traceability of Redux.One of the ways the libraries significantly diverge however, is when connecting your state to your components.
  • Redux on the other hand, recommends the smart component / dumb component pairing so that each component (regardless of where it sits in the hierarchy) can look up everything it needs to render itself.I prefer the Redux approach for a number of reasons:Easier to move things around in your component hierarchy.No pass-through props, where a component forwards props to its children despite not needing them for its own rendering.Easier to test / re-use / write storybook stories for the dumb components that are only interested in rendering.Dumb components are completely decoupled from Redux, allowing for re-usability if the consumer decides to change state frameworks (to MobX or relay for example).
  • Also, we can remove all knowledge of MobX from our dumb components by encapsulating all of this logic in our smart component wrapper, removing the need for the observer decorator entirely.

MobX and Redux give you two opposing ways to manage your state effectively in a React application. As an experiment I attempted to merge the good parts of both approaches, and ended up with a new…
Continue reading “Mobdux: Combining the good parts of MobX and Redux – Cameron Fletcher – Medium”

Redux with React – First Look #reactjs #Redux #javascript #appdev #programming #devops

Redux with React - First Look  #reactjs #Redux #javascript #appdev #programming #devops

  • Let’s start with the basics:

    According to the official site Redux is defined as a predictable state container for JavaScript apps.

  • In Redux, reducers are functions (pure, I will explain what a pure function is later) that take the current state of the application and an action and then return a new state.
  • 3 – Store

    Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners.

  • – Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.
  • You might be interested in:

    Predictability of outcome:

    There is always one source of truth, the store, with no confusion about how to sync the current state with actions and other parts of the application.

influenced by Flux architecture and became popular very quickly, excellent documentation and size (2 KB). Also it is very easy to use redux with react
Continue reading “Redux with React – First Look #reactjs #Redux #javascript #appdev #programming #devops”

React, Reselect and Redux – Dan Parker – Medium

React, Reselect and Redux  #redux #react #reselect #reactjs

  • It gets the state object and returns whatever state.foo.bar is.Now for ReselectReselect is a memoized selector function, composed of selectors, that returns something you want in your component’s props.import { createSelector } from ‘reselect’// selectorconst getBar = (state) = state.foo.bar// reselect functionexport const getBarState = createSelector( [ getBar ], (bar) = bar)I know that syntax looks funny at first, but here’s what happens.
  • Standard set-up, only we have our selector function getBarState(state) rather than state.foo.barWe passed our state into getBarStategetBarState calls getBar with state as the argument.getBar goes into our state object and returns bar.We use that return value in our Reselect function.Reselect handles the memoization.In Redux, whenever an action is called anywhere in the application, all mounted connected components call their mapStateToProps function.
  • all while being properly memoized.In order to properly memoize a selectorFunction for reusability, it can not be written in the same way…and your mapStateToProps must also change if it is to properly memoize.You need to create a new instance of your selector function every time it is needed for proper memoization on multiple components.To do this, change your selectorFunction to be an anonymous function, that returns a selectorFunctionimport { createSelector } from ‘reselect’// I am a selector, I need no special treatment to be properly // memoized across multiple instances// I have am now passing props so I can find a specific barconst getBar = (state, props) = { const id = props.id const barById = state.foo.bar.find((item,i) = item.id === id) return barById}// This no longer will work if it is needed in multiple places//export const getBarState = createSelector(// [ getBar ],// (bar) = bar//)// This is proper if it is needed in multiple instancesexport const makeGetBarState = () = createSelector( [ getBar ], (bar) = bar)Now when I call makeGetBarState I get a new instance of a createSelector function.To use this in my component I have to change things there as well.import React from ‘react’import { connect } from ‘react-redux’import { makeGetBarState } from ‘.
  • /selectors’// remember, mapStateToProps can have the component’s// props as the second argument// but now we need to modify this method to allow for a new// instance of our makeGetBarState function, which returns a // memoized selector const makeMapStateToProps = () = { const getBarState = makeGetBarState() const mapStateToProps = (state, props) = { return { bar: getBarState(state, props) } } return mapStateToProps}class Thing extends React.Component { …}export default need to change the standard mapStateToProps to be an anonymous function, that returns a mapStateToProps function…hence makeMapStateToPropsIn the makeMapStateToProps, I create a new instance of my selector function with the const getBarState = makeGetBarState()Now getBarState is a selector function, independent of any other selector function, and it will properly memoize across multiple mounted connected components.Clean it upWe all like short and sweet…right?
  • /selectors’const makeMapStateToProps = () = { const getBarState = makeGetBarState() return (state, props) = getBarState(state, props)}class Thing extends React.Component { …}export default has some cool features.

React is awesome. Redux is awesome, Reselect is awesome. It can be tricky to get all three to play nice together. I will try and explain, in detail, how they work together. If you have no knowledge…
Continue reading “React, Reselect and Redux – Dan Parker – Medium”

Thoughts on Redux – Pietro Ghezzi – Medium

Important read: Thoughts on #Redux  #ReactJS #JavaScript

  • Mostly for CRUD operations.The first problem was to denormalize the entire state (the use of the library “normalizr” is encouraged by redux docs, I didn’t know it when I started and I did it manually) in a way to split it in small pieces, each with a reducer.
  • It’s useful and speeds up a lot the development process.DemoSummary of my pros and consProsTest driven development is made easy, thanks to pure functions, and increases the development productivityOnly the root component (I call it container) is connected to the reducer, all the actions and state are passed through props.
  • This makes it easy to use component composition and write stateless components.Code linearity, everything is simple and doesn’t differ much from one project to another.Immutability: forcing to keep an immutable state helps a lot avoiding weird bugs.The Log middleware in dev mode, showing all the different states before and after an action is dispatched, is of a great help.ConsIt’s difficult to handle relationships and there isn’t any official library with documentation and support to help you with it.Redundant code, every action is written manually, even the most common, like changing an attribute of the state.Normalizing a complex state with many level of nested objects doesn’t always seem the best approach.My best practicesDirectory structure by module instead of scope.
  • A better approach it could be to retrieve the new state from the server when necessary and handle the state relationships on the database layer.TDD on reducers, tests on reducers not only speed up the development but also cover you on possible “silent” bugs on the state.Keep components simple and use component composition.Normalize the state with the use of Reselect libraryHandling complex store relationships (#386)Note from Dan AbramovDeleting is always tricky because there is no first class notion of a schema.
  • These reducers will know when to remove IDs from foreign key fields because they know what the schema looks like.Dependencies I will consider in for managing complex form stateRedux-ormA small, simple and immutable ORM to manage relational data in your Redux store.It would be great if CRUD operations were managed with the model declaration with no need to write actions manually.Redux UIGood solution to separate the UI state from the application state.NormalizrLibrary suggested in the official redux documentation for normalizing the application state.Main dependencies for this projectReactReduxReact router v2Redux ThunkReact DnDReselectStyled componentsReact BootstrapBootstrap Material DesignJestConclusionRedux is a good solution for handling complex interface, it is very similar to flux architecture, but if I have to rewrite the application, I would do it in a different way.I would avoid to specify all the logic on the client, moving a part on the server side.A good approach I have seen in some projects, it is to dispatch the actions to the server and with a websockets connection, notify all the connected clients of the changes made.This way the client is responsible only to denormalize and normalize the state received by the server, handle the UI state and presenting the data.On the server side is much easier to handle relationships with an ORM provided by a web framework.This project has been of a great help to make me understand all the caveats redux can reserve for a medium size application.

I have been working on my first project with Redux for the last few weeks. An admin interface to manage and create questionnaires about patients data collection. When writing a small application…
Continue reading “Thoughts on Redux – Pietro Ghezzi – Medium”

Redux for state management in large web apps

How we use the Redux + React architecture in Mapbox Studio   #redux #reactjs

  • Our Redux architecture boils down to three highly patterned function types: reducers, action creators, and selectors.
  • Slice reducers interpret actions to make changes to specific sub-stores within the single Redux store

    Each slice reducer ends up looking something like this (using the stylesheet sub-store as an example):

    This slice reducer pattern organizes both our code and our thinking.

  • Studio’s React components invoke action creators to trigger changes to the application state, each change represented by an action.
  • To manage asynchronous actions, we use redux-thunk, Redux middleware that allows your action creators to return functions, not just action objects.
  • Our Redux architecture shows how a set of simple concepts — stores, reducers, action creators, and selectors — can effectively organize large applications.

Building a state management system around Redux has allowed us to keep the complex Mapbox Studio (our version of Photoshop for maps) codebase manageable and testable. We’ve used Redux to establish interlocking systems defined by clear, scoped responsibilities and repeatable patterns. We impose restrictions on what code we put where to to make the codebase as a whole more organized, predictable, legible, and testable. These patterns also allow us to increase the quantity of code as the application grows without adding complexity to the architecture. (For those new to Redux, this is a must read 101).
Continue reading “Redux for state management in large web apps”

Let’s talk Redux… – chelle tuerk – Medium

Let’s talk Redux…  #redux #react #reactjs

  • Here’s a short and sweet breakdown of Redux in an attempt to retain the simplicity.First, and probably best, about Redux is that there is only one store keeping track of all the important data.
  • The store keeps track of all states throughout time, meaning you can rollback to a certain state in your app at any given point and the state is exactly as it was in that point in time.
  • That is, if the object has remained immutable throughout.Next, we wrap that whole dang app in one provider component which listens to the store.
  • ‘Smart’ components are aware of the framework and pulls properties off the store and then passes the data to ‘dumb’ components.Actions are then dispatched with a payload of all the data.The reducers have the ability to all react off of the same action — or not.
  • Neato.The main benefit of Redux is to simplify data with one store handling all state within the app.Boom.

Here we are, able to understand Redux at a high level, but once 10 components, and their containers, and their reducers, annnnnd their state all come into play things tend to get a bit fishy. Here’s…
Continue reading “Let’s talk Redux… – chelle tuerk – Medium”

Redux with React

Redux with React - First Look  #reactjs #Redux #javascript #appdev #programming #devops

  • Let’s start with the basics:

    According to the official site Redux is defined as a predictable state container for JavaScript apps.

  • In Redux, reducers are functions (pure, I will explain what a pure function is later) that take the current state of the application and an action and then return a new state.
  • 3 – Store

    Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners.

  • – Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.
  • You might be interested in:

    Predictability of outcome:

    There is always one source of truth, the store, with no confusion about how to sync the current state with actions and other parts of the application.

influenced by Flux architecture and became popular very quickly, excellent documentation and size (2 KB). Also it is very easy to use redux with react
Continue reading “Redux with React”