Warehouse: 215566435 / rectx

preface

Please go to my warehouse and spray:

I can’t learn to move, please don’t update.

Oh, you can’t believe there’s a third episode of this thing! Damn it, I didn’t even think about it. Let’s take a quick look at the first two episodes. I didn’t even think about it.

I’m tired of Redux, so make a wheel

The first episode is here: I’m tired of Redux, So Build a wheel: Rectx

You know what? I don’t even want to write it, but I can read it myself, and I don’t care if I don’t. Here we go.

What’s different about the new Rectx?

a light-weight state manager with mutable api.

You said light-weight will come to feed? It must be. The library is only a few k in size. Second, the new version of Rectx does not rely on React. Context, so it can be used in any React version.

Of course, with just 60 lines of core code, I wrote quite a few tests and achieved 98% coverage.

So, why is it updated again?

Both Redux and Mobx are great, but they’re a little too heavy for most projects that are CRUD only.

And for the react immutable philosophy, there is a lot of template code that is not very friendly to novices, experts, and skilled workers: novices find it complicated, experts find it annoying, and skilled workers find it not fast enough.

In addition, react functional programming and dom-diff rely on HTML tags, so we need to manually optimize react performance, hence the infamous shouldComponentUpdate.

In order to better solve some of the above problems, I started looking for a way to solve them: less templates

  • No manualshouldComponentUpdate
  • There are few apis and learning costs are low
  • mutable API
  • Here’s my solution.

The characteristics of

Rectx is powerful enough not only to provide a state library, but also a good type-assist system, which means you can support it in TypeScript!

  • Does not depend onreact.contextThe React API supports versions 15 and 16
  • mutable apiNo more template code
  • Complete testing, high test coverage
  • typescriptd.tsSupport, very friendly type hints
  • Don’t have to writeshouldComponentUpdateThe components of theAuto(automatic)
  • High performance, light weight

ShouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate

import React from 'react';
import {render} from 'react-dom';
import {init} from 'rectx';

const {Put, Ctx} = init({foo: 1});

const App = (a)= > (
  <div>
    <Ctx>{s => <div>{s.foo}</div>}</Ctx>
    <button onClick={()= > Put(s => (s.foo = s.foo + 1))}>add</button>
  </div>
);

render(<App />, document.getElementById('root'));
Copy the code

Using
renderProps, we can pull up the data we want.

Note that Put(s => (s.foo = s.foo + 1)) is where we modify our values directly, which is especially valuable when the data is very complex.

Don’t need toshouldComponentUpdateThe components of theAuto

Code examples sandbox

import { init } from "rectx";

const { Put, Ctx, Auto } = init({ foo: 1.bar: 1 });
Copy the code

First we still introduce our component, Put for update, Ctx for fetch, so what is Auto?

Auto is a selector that separates our stores, dividing each Store into smaller chunks, making our code simpler. For example, if we want to retrieve bar from the global state store, we can:

const Bars = Auto(s= > s.bar);
Copy the code

When we use Bars, we get the bar property. Auto, of course, translates to automatic. This is his first automatic feature, and his second feature is the following:

import React from "react";
import { render } from "react-dom";
import { init } from "rectx";

const { Put, Ctx, Auto } = init({ foo: 1.bar: 1 });

const Bars = Auto(s= > s.bar);

const App = (a)= > (
  <div>
    <Ctx>{s => <div>Foo:{s.foo}</div>}</Ctx>
    {Bars(bar => <div>Bar:{bar}</div>)}
    <button onClick={()= > Put(s => (s.foo = s.foo + 1))}>change Foo</button>
    <button onClick={()= > Put(s => (s.bar = s.bar + 1))}>change Bar</button>
  </div>
);

render(<App />, document.getElementById("root"));
Copy the code

First of all, Auto is a selector, and what it does is it gets the global state, and it picks out the properties that you care about, and when those properties are selected, as long as those properties aren’t updated, then the components that they return don’t update. Also, it doesn’t matter whether the external attributes are updated or not. If you are familiar with React, you must know how valuable it is to do this. You don’t need to write shouldComponentUpdate manually anymore.

Type hints Thanks to typescript, Rectx gets good type hints.

When we initialize the store, what are the values in the store? There are no intelligent props in pure JS, but when we add TS, things will be different

Updates can also be prompted

Finally, please don’t be stingy with your stars, Warehouse: Warehouse: 215566435/rectx