Pastate.js Responsive react state management framework

Time:2021-2-26

Introduction to pastate

What is pastate

Pastate is a responsive react state management framework, which implements asynchronous responsive state management. Pastate is a lean framework that encapsulates many high-level concepts, which means that youYou don’t have to learnSome concepts that are difficult to understand can be easily used in a simple application. In the process of application becoming more and more complex, you only need to gradually learn and use more functions in pastate to meet the increasingly complex system development requirements. At the same time, pastate is also a backward compatible progressive framework. You can use pastate to implement some components in existing react or Redux projects, and then gradually expand to the whole project.

Pastate home page:https://pastate.js.org

Pastate GitHub: https://github.com/BirdLeeSCUT/pastate(welcome star)

Simple example:

const state = store.state

class AppView extends Component {
    increaseAge(){
        state.myInfo.age += 1
    }
    changeName(newName){
        state.myInfo.name = newName
    }
    render() {
        ...
    }
}

You can assign values to the state node directly, and the responsive engine of pastate will update the view for you asynchronously! This mode is much more convenient and flexible than the original react’s setstate method or the original Redux’s reducer mode!

characteristic

  • Convenient and easy to use: pastate encapsulates advanced concepts, so you can easily use it as long as you have the basic knowledge of react
  • Responsive state: you can directly update the value of state with JS native mode, and pastate will update relevant views for you in a responsive manner
  • Type prompt: pastate has a perfect type definition file, which can greatly improve the development efficiency with the help of IntelliSense
  • Rendering on demand: pastate implements the traceability update reference mechanism of state node on demand, and the view can respond to the change of state efficiently
  • Asynchronous update mechanism: when you make continuous changes to the state, pastate will efficiently do only one asynchronous view update for you
  • Friendly learning curve: pastate encapsulates the advanced concepts of the flux pattern, which you only need to understand when you are interested
  • Compatible with Redux project: you can easily integrate pastate into Redux project and implement some containers as pastate mode
  • Support typescript: pastate itself is developed with tpyescript, with perfect type definition and generic support
  • MIT protocol authorization: you can use it for free in personal or business projects, and modify or expand it as needed

Brief introduction of principle

The name of pastate comes from the abbreviation of path state. Pastate adds the node’s location (path) information and store ownership information to each node of the state, so as to realize the recursive reference update of objects or array nodes on demand, and realize the immutable state feature. Therefore, pastate can manage complex state trees and achieve efficient asynchronous on-demand rendering. At the same time, pastate is based on Es5 Object.assign All node response operation support of state is realized. You only need to modify state like modifying ordinary variables, such asstate.userinfo.name = 'myName'At this time, the responsive engine of pastate will automatically update the relevant views asynchronously and efficiently for you. Please check the detailed principlePrinciple section

inspiration source

Pastate is inspired byreduxThe immutable state management mode and its applicationvue.jsAt the same time, it integrates the lean design(lean)Design idea.

reliability

Pastate has passed the comprehensive test of 160 + test cases and is stable and reliable. The specific content of the test case can be found in the source code of the projectsrc/pastate/testscatalog.

Welcome feedback

If you find a bug in pastate or have any suggestions, you are welcome to submitissueThank you for your feedback. If you like pastate, I hope to give you a valuable star^_^pastate github


Get started quickly

Let’s see how to build the simplest application with pastate.

install

Pastate is a react state management framework, which needs to be used with react. Let’s use it firstcreate-react-appTool creates a basic react project and demonstrates how to use pastate on this project

$ npm install -g create-react-app
$ create-react-app my-pastate-app
$ cd my-pastate-app

Then, you can use NPM to install pastate directly

$ npm install --save pastate

Or useyarnInstallation:

$ yarn add pastate

Start using

Pastate is easy to use. Let’s create a pastate component to display simple personal information.

establishsrc/MyPastateApp.jsxFile to write our components:

import React, { Component } from 'react';
import { Pastore, makeOnlyContainer } from 'pastate';

const store = new Pastore({
    name: 'Peter',
    isBoy: true,
    age: 10
})

class AppView extends Component {
    render() {
        let state = store.state;
        return (
            <div>
                My name is {state.name}.<br/>
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
            </div>
        )
    }
}

export default makeOnlyContainer(AppView, store)

This is an entry-level pastate component, which is different from the native react project in the following two aspects:

  1. Component independentstore
const store = new Pastore({
    name: 'Peter',
    isBoy: true,
    age: 10
})

The store is aData centerIt stores state data and contains a set of state management engine and view update engine.

When initializing a store, we need to pass in an initialization state to the paper constructor. We usually use the following naming method to reuse this initialization state:

const initState = {
    name: 'Peter',
    isBoy: true,
    age: 10
}
const store = new Pastore(initState)
  1. Connecting components and stores

For applications with only one store, we use themakeOnlyContainerConnect the store and component into onecontainerThis enables the component view to respond to changes in the state in the store

Then, render the container in HTML

src/MyPastateApp.jsx

...
export default makeOnlyContainer(App, store)

src/index.js

import ReactDOM from 'react-dom';
import container from './MyPastateApp';
ReactDOM.render(container, document.getElementById('root'));

be careful,makeOnlyContainerWhat is generated is a react element, that is<Xxx />Therefore, there is no need to add another layer of <… / >.

Update state value

Next, let’s try to update the value of state: control it with two buttons state.age The value increases and decreases.

  • First, add two operation functions to the componentincreaseAgeanddecreaseAge
// src/MyPastateApp.jsx
...
const store = new Pastore(initState)
class AppView extends Component {

    increaseAge(){
        store.state.age += 1
    }
    
    decreaseAge(){
        store.state.age -= 1
    }

    render() {
        ...
    }
}
...

As you can see, using pastate to update state is very simpleYou can directly assign values to the nodes that need to be updated in the stateThe view connected to the store is automatically updated.

  • Next, add two buttons to JSX to trigger the two operation functions:

src/MyPastateApp.jsx

...
    render() {
        let state = store.state;
        return (
            <div>
            
                My name is {state.name}.<br/>
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
                
                <button onClick={this.decreaseAge}> decrease age </button> 
                <button onClick={this.increaseAge}> increase age </button> 
                
            </div>
        )
    }
...

Amazing! Our first simple pastate application is complete:

clickincreaseAgeanddecreaseAgeButton, you can see the change of age value.
You can add a few more buttons to modify the name and gender in the state to see if the view is updated as you wish.

Pastate implements a state management engine that combines responsive and immutable features in the store. We can operate the state like modifying ordinary variables. At the same time, pastate can efficiently update the relevant views according to the changes of the state.

Editor IntelliSense

We recommend itVisual Studio CodeEditor development react / pastate applications, it has a good variable type intelligent prompt function and other excellent features, so that we can improve the development efficiency, and reduce some input errors.

Tips: vscode turns off the function of triggering Emmet by tab key by default. You can turn it on by modifying the settings"emmet.triggerExpansionOnTab": true

Let’s simply usejsDocComment to make state have type prompt effect:
src/MyPastateApp.jsx

...
const initState = {
    name: 'Peter',
    isBoy: true,
    age: 10,
}
const store = new Pastore(initState)

/** @type {initState} */
const state =  store.state ; // modify the point to extract the state into a file level variable

class AppView extends Component {

    increaseAge(){
        state.age  +=1 // to modify the point, use the file level variable state, the same below
    }
    
    decreaseAge(){
        state.age  -=1 // modification point
    }

    render() {
        //Modification point
        return (
            <div>
                My name is {state.name}.<br/> 
                I am a {state.isBoy ? "boy" : "girl"}.<br/>
                I am {state.age} years old.<br/>
                ... 
            </div>
        )
    }
}
...
  • We put store.state This makes the use and modification of state more convenient.
  • At the same time, we areconst stateType comments before/** @type {initState} */To make the editor know the format of state and get the following intelligent prompt effect:

The function of intelligent prompt is very practical when the structure of state is complex.

You can also use the createstore function provided by pastate to create a store and automatically obtain the state type definition. Please refer toAPI documentationLet’s create a store by using the new store method. If you use typescript for development, pastate supports the variable type passing function of typescript generics without JSDoc comments.

This is just a simple example, only involving a react component. In the document, we will introduce how to build a pastate application with multiple components.


Pastate document

Will continue to update, welcome to pay attention to this column^_^

Recommended Today

Third party calls wechat payment interface

Step one: preparation 1. Wechat payment interface can only be called if the developer qualification has been authenticated on wechat open platform, so the first thing is to authenticate. It’s very simple, but wechat will charge 300 yuan for audit 2. Set payment directory Login wechat payment merchant platform( pay.weixin.qq . com) — > Product […]