React bindings for MobX

Overview

mobx-react


🚨 🚨 🚨 This repo has been moved to mobx


CircleCI CDNJS Minzipped size

TypeScriptcode style: prettier

Discuss on Github View changelog

Package with React component wrapper for combining React with MobX. Exports the observer decorator and other utilities. For documentation, see the MobX project. There is also work-in-progress user guide for additional information. This package supports both React and React Native.

Choosing your version

There are currently two actively maintained versions of mobx-react:

NPM Version Support MobX version Supported React versions Supports hook based components
v7 6.* 16.8+ Yes
v6 4._ / 5._ 16.8+ Yes
v5 4._ / 5._ 0.13+ No, but it is possible to use <Observer> sections inside hook based components

mobx-react 6 / 7 is a repackage of the smaller mobx-react-lite package + following features from the [email protected] package added:

  • Support for class based components for observer and @observer
  • Provider / inject to pass stores around (but consider to use React.createContext instead)
  • PropTypes to describe observable based property checkers (but consider to use TypeScript instead)
  • The disposeOnUnmount utility / decorator to easily clean up resources such as reactions created in your class based components.

Installation

npm install mobx-react --save

Or CDN: https://unpkg.com/mobx-react (UMD namespace: mobxReact)

import { observer } from "mobx-react"

This package provides the bindings for MobX and React. See the official documentation for how to get started.

For greenfield projects you might want to consider to use mobx-react-lite, if you intend to only use function based components. React.createContext can be used to pass stores around.

API documentation

Please check mobx.js.org for the general documentation. The documentation below highlights some specifics.

observer(component)

Function (and decorator) that converts a React component definition, React component class, or stand-alone render function, into a reactive component. A converted component will track which observables are used by its effective render and automatically re-render the component when one of these values changes.

Functional Components

React.memo is automatically applied to functional components provided to observer. observer does not accept a functional component already wrapped in React.memo, or an observer, in order to avoid consequences that might arise as a result of wrapping it twice.

Class Components

When using component classes, this.props and this.state will be made observables, so the component will react to all changes in props and state that are used by render.

shouldComponentUpdate is not supported. As such, it is recommended that class components extend React.PureComponent. The observer will automatically patch non-pure class components with an internal implementation of React.PureComponent if necessary.

See the MobX documentation for more details.

import { observer } from "mobx-react"

// ---- ES6 syntax ----
const TodoView = observer(
    class TodoView extends React.Component {
        render() {
            return <div>{this.props.todo.title}</div>
        }
    }
)

// ---- ESNext syntax with decorator syntax enabled ----
@observer
class TodoView extends React.Component {
    render() {
        return <div>{this.props.todo.title}</div>
    }
}

// ---- or just use function components: ----
const TodoView = observer(({ todo }) => <div>{todo.title}</div>)

Observer

Observer is a React component, which applies observer to an anonymous region in your component. It takes as children a single, argumentless function which should return exactly one React component. The rendering in the function will be tracked and automatically re-rendered when needed. This can come in handy when needing to pass render function to external components (for example the React Native listview), or if you dislike the observer decorator / function.

class App extends React.Component {
    render() {
        return (
            <div>
                {this.props.person.name}
                <Observer>{() => <div>{this.props.person.name}</div>}</Observer>
            </div>
        )
    }
}

const person = observable({ name: "John" })

ReactDOM.render(<App person={person} />, document.body)
person.name = "Mike" // will cause the Observer region to re-render

In case you are a fan of render props, you can use that instead of children. Be advised, that you cannot use both approaches at once, children have a precedence. Example

class App extends React.Component {
    render() {
        return (
            <div>
                {this.props.person.name}
                <Observer render={() => <div>{this.props.person.name}</div>} />
            </div>
        )
    }
}

const person = observable({ name: "John" })

ReactDOM.render(<App person={person} />, document.body)
person.name = "Mike" // will cause the Observer region to re-render

useLocalObservable hook

User guide

Local observable state can be introduced by using the useLocalObservable hook, that runs once to create an observable store. A quick example would be:

import { useLocalObservable, Observer } from "mobx-react-lite"

const Todo = () => {
    const todo = useLocalObservable(() => ({
        title: "Test",
        done: true,
        toggle() {
            this.done = !this.done
        }
    }))

    return (
        <Observer>
            {() => (
                <h1 onClick={todo.toggle}>
                    {todo.title} {todo.done ? "[DONE]" : "[TODO]"}
                </h1>
            )}
        </Observer>
    )
}

When using useLocalObservable, all properties of the returned object will be made observable automatically, getters will be turned into computed properties, and methods will be bound to the store and apply mobx transactions automatically. If new class instances are returned from the initializer, they will be kept as is.

It is important to realize that the store is created only once! It is not possible to specify dependencies to force re-creation, nor should you directly be referring to props for the initializer function, as changes in those won't propagate.

Instead, if your store needs to refer to props (or useState based local state), the useLocalObservable should be combined with the useAsObservableSource hook, see below.

Note that in many cases it is possible to extract the initializer function to a function outside the component definition. Which makes it possible to test the store itself in a more straight-forward manner, and avoids creating the initializer closure on each re-render.

Note: using useLocalObservable is mostly beneficial for really complex local state, or to obtain more uniform code base. Note that using a local store might conflict with future React features like concurrent rendering.

Server Side Rendering with enableStaticRendering

When using server side rendering, normal lifecycle hooks of React components are not fired, as the components are rendered only once. Since components are never unmounted, observer components would in this case leak memory when being rendered server side. To avoid leaking memory, call enableStaticRendering(true) when using server side rendering.

import { enableStaticRendering } from "mobx-react"

enableStaticRendering(true)

This makes sure the component won't try to react to any future data changes.

Which components should be marked with observer?

The simple rule of thumb is: all components that render observable data. If you don't want to mark a component as observer, for example to reduce the dependencies of a generic component package, make sure you only pass it plain data.

Enabling decorators (optional)

Decorators are currently a stage-2 ESNext feature. How to enable them is documented here.

Should I still use smart and dumb components?

See this thread. TL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use observer on all components.

PropTypes

MobX-react provides the following additional PropTypes which can be used to validate against MobX structures:

  • observableArray
  • observableArrayOf(React.PropTypes.number)
  • observableMap
  • observableObject
  • arrayOrObservableArray
  • arrayOrObservableArrayOf(React.PropTypes.number)
  • objectOrObservableObject

Use import { PropTypes } from "mobx-react" to import them, then use for example PropTypes.observableArray

Provider and inject

See also the migration guide to React Hooks.

Note: usually there is no need anymore to use Provider / inject in new code bases; most of its features are now covered by React.createContext.

Provider is a component that can pass stores (or other stuff) using React's context mechanism to child components. This is useful if you have things that you don't want to pass through multiple layers of components explicitly.

inject can be used to pick up those stores. It is a higher order component that takes a list of strings and makes those stores available to the wrapped component.

Example (based on the official context docs):

@inject("color")
@observer
class Button extends React.Component {
    render() {
        return <button style={{ background: this.props.color }}>{this.props.children}</button>
    }
}

class Message extends React.Component {
    render() {
        return (
            <div>
                {this.props.text} <Button>Delete</Button>
            </div>
        )
    }
}

class MessageList extends React.Component {
    render() {
        const children = this.props.messages.map(message => <Message text={message.text} />)
        return (
            <Provider color="red">
                <div>{children}</div>
            </Provider>
        )
    }
}

Notes:

  • It is possible to read the stores provided by Provider using React.useContext, by using the MobXProviderContext context that can be imported from mobx-react.
  • If a component asks for a store and receives a store via a property with the same name, the property takes precedence. Use this to your advantage when testing!
  • When using both @inject and @observer, make sure to apply them in the correct order: observer should be the inner decorator, inject the outer. There might be additional decorators in between.
  • The original component wrapped by inject is available as the wrappedComponent property of the created higher order component.

"The set of provided stores has changed" error

Values provided through Provider should be final. Make sure that if you put things in context that might change over time, that they are @observable or provide some other means to listen to changes, like callbacks. However, if your stores will change over time, like an observable value of another store, MobX will throw an error. This restriction exists mainly for legacy reasons. If you have a scenario where you need to modify the set of stores, please leave a comment about it in this issue https://github.com/mobxjs/mobx-react/issues/745. Or a preferred way is to use React Context directly which does not have this restriction.

Inject as function

The above example in ES5 would start like:

var Button = inject("color")(
    observer(
        class Button extends Component {
            /* ... etc ... */
        }
    )
)

A functional stateless component would look like:

var Button = inject("color")(
    observer(({ color }) => {
        /* ... etc ... */
    })
)

Customizing inject

Instead of passing a list of store names, it is also possible to create a custom mapper function and pass it to inject. The mapper function receives all stores as argument, the properties with which the components are invoked and the context, and should produce a new set of properties, that are mapped into the original:

mapperFunction: (allStores, props, context) => additionalProps

Since version 4.0 the mapperFunction itself is tracked as well, so it is possible to do things like:

const NameDisplayer = ({ name }) => <h1>{name}</h1>

const UserNameDisplayer = inject(stores => ({
    name: stores.userStore.name
}))(NameDisplayer)

const user = mobx.observable({
    name: "Noa"
})

const App = () => (
    <Provider userStore={user}>
        <UserNameDisplayer />
    </Provider>
)

ReactDOM.render(<App />, document.body)

N.B. note that in this specific case neither NameDisplayer nor UserNameDisplayer needs to be decorated with observer, since the observable dereferencing is done in the mapper function

Using PropTypes and defaultProps and other static properties in combination with inject

Inject wraps a new component around the component you pass into it. This means that assigning a static property to the resulting component, will be applied to the HoC, and not to the original component. So if you take the following example:

const UserName = inject("userStore")(({ userStore, bold }) => someRendering())

UserName.propTypes = {
    bold: PropTypes.boolean.isRequired,
    userStore: PropTypes.object.isRequired // will always fail
}

The above propTypes are incorrect, bold needs to be provided by the caller of the UserName component and is checked by React. However, userStore does not need to be required! Although it is required for the original stateless function component, it is not required for the resulting inject component. After all, the whole point of that component is to provide that userStore itself.

So if you want to make assertions on the data that is being injected (either stores or data resulting from a mapper function), the propTypes should be defined on the wrapped component. Which is available through the static property wrappedComponent on the inject component:

const UserName = inject("userStore")(({ userStore, bold }) => someRendering())

UserName.propTypes = {
    bold: PropTypes.boolean.isRequired // could be defined either here ...
}

UserName.wrappedComponent.propTypes = {
    // ... or here
    userStore: PropTypes.object.isRequired // correct
}

The same principle applies to defaultProps and other static React properties. Note that it is not allowed to redefine contextTypes on inject components (but is possible to define it on wrappedComponent)

Finally, mobx-react will automatically move non React related static properties from wrappedComponent to the inject component so that all static fields are actually available to the outside world without needing .wrappedComponent.

Strongly typing inject

With TypeScript

inject also accepts a function ((allStores, nextProps, nextContext) => additionalProps) that can be used to pick all the desired stores from the available stores like this. The additionalProps will be merged into the original nextProps before being provided to the next component.

import { IUserStore } from "myStore"

@inject(allStores => ({
    userStore: allStores.userStore as IUserStore
}))
class MyComponent extends React.Component<{ userStore?: IUserStore; otherProp: number }, {}> {
    /* etc */
}

Make sure to mark userStore as an optional property. It should not (necessarily) be passed in by parent components at all!

Note: If you have strict null checking enabled, you could muffle the nullable type by using the ! operator:

public render() {
   const {a, b} = this.store!
   // ...
}

By migrating to React Hooks you can avoid problems with TypeScript.

Testing store injection

It is allowed to pass any declared store in directly as a property as well. This makes it easy to set up individual component tests without a provider.

So if you have in your app something like:

<Provider profile={profile}>
    <Person age={"30"} />
</Provider>

In your test you can easily test the Person component by passing the necessary store as prop directly:

const profile = new Profile()
const mountedComponent = mount(
   <Person age={'30'} profile={profile} />
)

Bear in mind that using shallow rendering won't provide any useful results when testing injected components; only the injector will be rendered. To test with shallow rendering, instantiate the wrappedComponent instead: shallow(<Person.wrappedComponent />)

disposeOnUnmount(componentInstance, propertyKey | function | function[])

Function (and decorator) that makes sure a function (usually a disposer such as the ones returned by reaction, autorun, etc.) is automatically executed as part of the componentWillUnmount lifecycle event.

import { disposeOnUnmount } from "mobx-react"

class SomeComponent extends React.Component {
    // decorator version
    @disposeOnUnmount
    someReactionDisposer = reaction(...)

    // decorator version with arrays
    @disposeOnUnmount
    someReactionDisposers = [
        reaction(...),
        reaction(...)
    ]


    // function version over properties
    someReactionDisposer = disposeOnUnmount(this, reaction(...))

    // function version inside methods
    componentDidMount() {
        // single function
        disposeOnUnmount(this, reaction(...))

        // or function array
        disposeOnUnmount(this, [
            reaction(...),
            reaction(...)
        ])
    }
}

DevTools

[email protected] and higher are no longer compatible with the mobx-react-devtools. That is, the MobX react devtools will no longer show render timings or dependency trees of the component. The reason is that the standard React devtools are also capable of highlighting re-rendering components. And the dependency tree of a component can now be inspected by the standard devtools as well, as shown in the image below:

hooks.png

FAQ

Should I use observer for each component?

You should use observer on every component that displays observable data. Even the small ones. observer allows components to render independently from their parent and in general this means that the more you use observer, the better the performance become. The overhead of observer itself is negligible. See also Do child components need @observer?

I see React warnings about forceUpdate / setState from React

The following warning will appear if you trigger a re-rendering between instantiating and rendering a component:


Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.`

-- or --


Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Usually this means that (another) component is trying to modify observables used by this components in their constructor or getInitialState methods. This violates the React Lifecycle, componentWillMount should be used instead if state needs to be modified before mounting.

Issues
  • mobx-react 6

    mobx-react 6

    Things to be addressed:

    • [x] switch to modern context (but keep same Provider / inject api) (#448)
    • [x] plan strategy for hook based components (currently; use <Observer> or mobx-react-lite)
    • [x] ~make sure mobx-react is ready for concurrent react (primary concern: don't leak memory on early component disposal)~ -> opened #645 to address
    • [x] dispose components on error? (since upstream error boundaries should now handle them)
    • [x] merge #616 / #619
    • [x] stop lifecycle compatibility support
    • [x] ~split into smaller packages for Provider / inject / propTypes?~ nope, see #661
    • [x] verify devtools behavior (especially functional comps)
    • [x] verify component tree (names, provider & inject)
    • [x] Drop dependency on hoist-non-react-statics?
    • [x] rename entry files (#408)?
    • [x] use microbundle?
    • [x] update readme
    • [x] process review comments
    • [x] process TODO's
    breaking change has PR 
    opened by mweststrate 108
  • [Question] How to get typesafe injection

    [Question] How to get typesafe injection

    I've looked at https://github.com/mobxjs/mobx-react#strongly-typing-inject

    but am not sure if there is a better way. I generally pick out a lot of things to inject. Imagine

    @inject((stores) => {
      return {
        storeA: stores.storeA,
        storeB: stores.storeB,
        storeC: stores.storeC,
        somethingOnStoreD: stores.storeD.something
    })
    MyComponent extends React.Component<IMyComponentProps>
    

    But if I render this component from a parent component, then I can't render it without marking each one of the stores or props as optional in IMyComponentProps or pass in values for each of those props. This is documented but makes it very difficult to actually use the props in the component.

    Basically anytime I use something from storeA, storeB, or somethingOnStoreD - I first have to check for the presence of those or else typescript will complain that it is potentially undefined.

    I think part of the problem is typescript currently doesn't allow class mutations from decorators. But even when I use inject as a function, the tsd file specifies inject returns the original target which expects the props declared in IMyComponentProps export function inject<T, P>(storesToProps : IStoresToProps<T, P>): (<TFunction extends IReactComponent<T | P>>(target: TFunction) => (TFunction & IWrappedComponent<T>)); // decorator

    If I were to change it the tsd to

    export function inject<T, P>(storesToProps : IStoresToProps<T, P>): (<TFunction extends IReactComponent<T | P>>(target: TFunction) => (IReactComponent<P> & IWrappedComponent<T>)); // decorator

    and inject with

    interface IPropsFromStore {
      storeA: storeA;
      storeB: storeB;
      ...
    }
    IPropsFromParent {
    }
    inject<IPropsFromStore, IPropsFromParent>((stores) => {
      return {
        storeA: stores.storeA,
        storeB: stores.storeB,
        storeC: stores.storeC,
        somethingOnStoreD: stores.storeD.something
    })(
    MyComponent extends React.Component<IPropsFromStore & IPropsFromParent>)
    

    This allows me to use the function to return a component that no longer requires all the props that will be inserted with injection. It also will validate that the inject function is returning the props that I am expecting and also allows MyComponent to use props from injection directly and force checks on props from parent. The problem is this declaration will no longer allow inject to be used as a decorator since its no longer clear that inject returns a signature compatible with the original constructor. I kind of wish this functionality somehow existed because I could be willing to forego decorators to have a better type-checking experience but not sure if its possible.

    Sorry this was a bit long, do you know of a better way to solve these problems?

    Thanks!

    opened by noveyak 83
  • Use hooks to implement `@observer` and `<Observer>`

    Use hooks to implement `@observer` and ``

    Hooks (will be introduced in react 16.7) form a super solid foundation to write function based components.

    An early PoC is here: https://codesandbox.io/s/k2vmjpqvnv

    We could hooks support here, or expose it as separate clean package. In the latter case that package could be pretty lightweight and aimed at React 16.7 purely:

    • No Provider / inject (use useContext instead, which is better typeable)
    • No propTypes (use TypeScript)
    • No class component support (use this package). Removes most of the householding code, which is aimed at class patching
    • No properties that are automatically converted to an observable object (restores the problem that computed values shouldn't use props)
    • Limit devTools support to obtaining dependency tree. Measuring renderings and showing that on screen is now perfectly supported in the standard React devtools.
    enhancement 
    opened by mweststrate 60
  • [Bug?] componentDidUpdate() doesn't trigger after version 6

    [Bug?] componentDidUpdate() doesn't trigger after version 6

    Like title says, componentDidUpdate() won't trigger since mobx-react version 6.

    For example, I want to keep the scroll position to the bottom:

    @inject('someStore')
    @observer
    class SomeList extends React.PureComponent {
    ...
    componentDidMount() {
      this.scrollToBottom();
    }
    
    componentDidUpdate() { // never triggers, even though it re-renders, when there's new data
      this.scrollToBottom(); 
    }
    ....
    

    Trying with reaction, doesn't really solve the issue, since it doesn't wait for the element to render and it will scroll to the second to last element instead.

    componentDidMount() {
      reaction(
        () => someStore.someArray.length, // or prop, etc..
       (val, currentReaction) => {
         this.scrollToBottom();
         this.scrollbarReactionToDispose = currentReaction; 
         // not sure if I need to dispose reaction in componentWillUnmount
         // since it's in the same class and if it's the correct way to do so
       }
      );
    }
    
    componentWillUnmount() {
      this.scrollbarReactionDispose.dispose();
    }
    

    I've also tried going back to a React.Component, just to be sure, but no luck. I don't know if I'm missing something.

    Thanks.

    bug breaking change has PR 
    opened by RosenTomov 53
  • Trigger a custom rendering

    Trigger a custom rendering

    Hello, right now by decorating any component with @observer will trigger a render call whenever any observable data (used inside the render method) changes.

    What if we want to fine-tune when the render should be triggered? An example of this would be when creating a HOC for routing. I want to re-render a component and all its children only when a we are on a certain route/state (the routes changes coming from an observable).

    In this case we don't use/need the observable inside the render method. Also we don't want to re-trigger the render for any route changes (only for specific ones).

    So this is what I've accomplished so far:

    import React, { Component, createElement } from 'react';
    import { autorun } from 'mobx';
    import { inject} from 'mobx-react';
    
    function routeNode(nodeName) { // route node Name
      return function routeNodeWrapper(RouteSegment) { // component Name
    
        @inject('routerStore')
        class RouteNode extends Component {
    
          constructor(props, context) {
            super(props, context);
            this.state = {
              route: props.routerStore.route,
              intersectionNode: props.routerStore.intersectionNode,
            };
          }
    
          componentDidMount() {
            this.autorunDisposer = autorun(() => {
              this.setState({
                route: this.props.routerStore.route,
                intersectionNode: this.props.routerStore.intersectionNode
              });
            });
          }
    
          componentWillUnmount() {
            this.autorunDisposer();
          }
          // Re-render the route-node (wrapped component) only if
          // it is the correct "transition node"
          shouldComponentUpdate (newProps, newState) {
            return (newState.intersectionNode === nodeName);
          }
    
          render() {
            const { props } = this;
            const component = createElement(
              RouteSegment,
              { ...props }
            );
    
            return component;
          }
        }
    
        return RouteNode;
      };
    }
    
    export default routeNode;
    

    And used like this:

    import Section from './section'
    export default routeNode('section')(Sections);
    

    So when the observable route from the routerStore will be equal to section the HOC will re-render its wrapped component (and so all its children).

    Although this works it feels much like a hack. Is this the correct way to accomplish a custom re-render behaviour?

    Does exist (or should be created) an API to do this? I mean instead of @observer create a similar pattern that will re-render if a custom condition (according to us) is met, of course depending on a change of an observable.

    opened by LeonardoGentile 38
  • Migrate away from componentWillMount

    Migrate away from componentWillMount

    The latest React discourages using componentWillMount. https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

    opened by heikkilamarko 35
  • Optimize reactive props

    Optimize reactive props

    Particular fix for #380 #347

    Achieve granular observale state/props

    Technique: Instead of having only 1 atom for whole props/state, we have N atoms for each property/state element, and extra one which track keyset change

    When new props object set, we detect key change and report changed for extra atom. Also we instrument props/state object and in-place change properties to getter+setter, which uses atoms and single value storage. Also, previous props/state object should be freezed with it values and de-instrumented from getters and setters, to get lifecycle methods work.

    Having extra atom, which detects keys change helps us to detect new props/state element appears.

    ~~Unfortunatelly, to make in-place instrument with props/state object, I forced to make a extra wrapper for Observer component, which calls to createElement and un-freeze it props. This is definetely not good for performance, but React.createElement freeze objects :( I think this extra wrapper get this issue back: https://github.com/mobxjs/mobx/issues/405 (and many tests are failed because of this)~~ UPD: solution found

    Comments are requested.

    opened by Strate 34
  • Revert #812

    Revert #812

    I believe we need to revert this change: #812

    1. if process is not available in the global scope (and it is not in browsers) it will break because you can't check for variable existence by doing it like
    if (nonExistentVar) { ... }
    
    1. It breaks dead-code elimination for some reason, probably because of a more complex expression.
    discuss 
    opened by dmwmt 24
  • Observer with render prop and inject

    Observer with render prop and inject

    I would like to propose an alternative way of using Observer. There is a clear benefit, that you don't need to repeat closing element there and it feels bit cleaner in my opinion.

    <Observer
      render={() => (
        <div />
      )}
    />
    // vs (note: both are formatted by Prettier)
    <Observer>
      {() => (
        <div />
      )}
    </Observer>
    

    Furthermore, it's a bit of pain needing to use inject HOC with this pattern. It separates two concerns that should stick together in my opinion. What about something like this?

    <Observer inject={[ 'store1', 'store2' ]} render={({ store1, store2 }) => (
      <div>{store1.observable && store2.observable}</div>
    )} />
    

    I am not entirely sure it's possible to achieve this with the current implementation of the Observer which is just wrapped HOC under the hood. Perhaps the whole thing could go other way around, implement Observer as the regular class with everything and then turning it to HOC is much easier.

    ready for volunteer 
    opened by FredyC 23
  • Fix: observer should not modify original componentClass

    Fix: observer should not modify original componentClass

    When use as function, observer modifies original componentClass It could cause Maximum call stack size exceeded exception after componentClass's render method got too many wrapping

    It happens to me, and I create a repo to reproduce it: https://github.com/zhangciwu/mobx-react-stack-exceeded

    This PR is to fix it by extending (clone) componentClass before modifying, and keeping original class out of altering. Also appended some test cases.

    minor 
    opened by zhangciwu 23
Releases(not_used)
Owner
MobX
Simple, scalable state management
MobX
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.5k Oct 18, 2021
A performant, scalable and pluggable approach to instrumenting your React application.

react-i13n react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application. Typically, you have to manually

Yahoo 333 Oct 19, 2021
keepalive-react-component是一个react缓存组件

基于react开发出来的react缓存组件,类似于类似vue的keepalive包裹vue-router的效果功能

null 12 Oct 3, 2021
Isomorphic flux implementation

alt Check out the API Reference for full in-depth docs. For a high-level walk-through on flux, take a look at the Getting Started guide. What follows

Josh Perez 3.5k Sep 7, 2021
React integration for Baobab.

baobab-react Welcome to baobab's React integration (from v2.0.0 and onwards). Implemented patterns: Hooks Higher order components (curried so also usa

Guillaume Plique 308 Aug 20, 2021
Declarative data-fetching and caching framework for REST APIs with React

resourcerer resourcerer is a library for declaratively fetching and caching your application's data. Its powerful useResources React hook or withResou

Noah Grant 35 Sep 30, 2021
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.2k Oct 15, 2021
Predictable state container for JavaScript apps

Redux is a predictable state container for JavaScript apps. (Not to be confused with a WordPress framework – Redux Framework) It helps you write appli

Redux 56.9k Oct 15, 2021
Easily create controllable components

react-controllables Easily create controllable components If you've worked with forms in ReactJS, you're probably familiar with the idea of controlled

Matthew Dapena-Tretter 255 Sep 15, 2021
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux

RefluxJS A simple library for unidirectional dataflow architecture inspired by ReactJS Flux. Installation You can currently install the package as a n

null 5.4k Oct 20, 2021
[UNMAINTAINED] Reactive state and side effect management for React using a single stream of actions

Flexible state and side effect manager using RxJS for React. About Fluorine provides you with easy, reactive state and side effect management, accumul

Phil Pluckthun 287 Aug 6, 2021
store enhancer for https://github.com/reactjs/redux which allows batching subscribe notifications.

redux-batched-subscribe Store enhancer for redux which allows batching of subscribe notifications that occur as a result of dispatches. npm install --

Terry Appleby 496 Oct 11, 2021
:hammer_and_wrench: Flux architecture tools for React

Fluxxor is a set of tools to aid in developing React applications with the Flux architecture. Installation Fluxxor is available on npm and works with

Michelle Tilley 1.7k Sep 22, 2021
Dead simple + opinionated toolkit for building redux/react applications

Simple opinionated toolkit for building applications using React, Redux, and Immutable.js You're early! There is sparse documentation, no tests, and i

shasta (archive) 520 Oct 6, 2021
Declarative state and side effects management for popular JavaScript frameworks

Cerebral A declarative state and side effects management solution for popular JavaScript frameworks Documentation Current Cerebral (2.x and up) Previo

Cerebral 1.9k Oct 12, 2021
A pluggable container for universal flux applications.

Fluxible This repository is the home of Fluxible and related libraries. For support, join our gitter.im channel. Development Development is currently

Yahoo 1.8k Oct 12, 2021
how to use react ddd with TODO

分析你的应用有哪些功能,功能之间有哪些关系 要花费 2-3 倍的时间 人没有办法做出一个自己都不了解的东西,即便你用 分层架构 即刻开始写,这些问题也只是延迟出现,一旦出现,反而会更加难以调试,甚至完全不可用 useXxxService 是自定义服务,useXxx 一般是第三方,比如 useRequ

Prajna 6 Aug 21, 2021