React third-party component 4 (the use of Reflux for state management①simple use)

React third-party component 4 (the use of Reflux for state management①simple use)

This tutorial has a total of 5 articles, one updated daily, please follow us! You can enter the historical news to view the previous articles, and stay tuned for our new articles!

1. React third-party component 4 (the use of Reflux for state management①simple use) ---2018.03.13

2. React third-party component 4 (Use of Reflux for state management ②TodoList) ---2018.03.14

3. React third-party component 4 (use of Reflux for state management ③TodoList) ---2018.03.15

4. React third-party components 4 (the use of Reflux for state management under TodoList) ---2018.03.16

5. React third-party components 4 (use of Reflux for state management ⑤ asynchronous operation) ---2018.03.19

Development environment: Windows 8, node v8.9.1, npm 5.5.1, WebStorm 2017.2.2

Let me talk about ReFlux first

Quote: https://segmentfault.com/a/1190000004843954 A simple one-way data flow application library, inspired by ReactJS Flux. ╔════════╗ ╔════════╗ ╔═════════════════╗ ║ Actions ║──>║ Stores ║──>║ View Components ║ ╚═════════╚═══ ═════╝ ╚═════════════════╝ ^ │ └───────────────────── ───────────────┘Comparing with React Flux , the goal of refluxjs is to make it easier for us to build web applications. Same as point 1, 2 has actions, there Stores 3, the unidirectional data stream is different from 1, through the internal expansion behavior actions, removing the single dispatcher embodiment 2, stores actions can monitor the behavior of the switch is determined without miscellaneous 3 , Stores can monitor each other, and can perform further data aggregation operations, similar to map/reduce 4, waitFor is replaced by continuous and parallel data streams

Let's hit the code directly!

Install reflux first

npm i -S reflux

1. We create the reflux directory, reflux1 directory, and Index.jsx

2. Index.jsx code under reflux

import React from'react';
import {HashRouter, Route, NavLink, Redirect} from'react-router-dom';
import ReFlux1 from'./reFlux1/Index'

const Index = ({match}) =>
    <HashRouter>
        <div>
            <div className="nav">
                <NavLink to="/ReFlux/ReFlux1" activeClassName="selected">ReFlux1</NavLink>
            </div>
            <Route exact path={`${match.url}`}
                   render={() => (<Redirect to={`${match.url}/ReFlux1`}/>)}/>
            <Route path={`${match.url}/ReFlux1`} component={ReFlux1}/>
        </div>
    </HashRouter>
;

export default Index;

3. Create Index.jsx under reflux1

import React from'react'
import Reflux from'reflux'
import Action from'./Action'
import Store from'./Store'

class Index extends Reflux.Component {
    constructor(props) {
        super(props);
        this.store = Store;
    }

    render() {
        return (
            <div className="todoList">
                {this.state.num}
                <button onClick={() => Action.add()}>+</button>
            </div>
        );
    }
}

export default Index;

Pay attention to these frames!

4. Build Store.js

import Reflux from'reflux'
import Action from'./Action'

class Store extends Reflux.Store {
    constructor() {
        super();
        this.listenables = Action;
        this.state = {
            num: 0
        }
    }

    onAdd() {
        this.setState({num: this.state.num + 1});
    }
}

export default Store;

5. Create Action.js

import Reflux from'reflux'

let Action = Reflux.createActions([
    'add'
]);
export default Action;

That's it, it's relatively simple!

6. Check the browser

If you have any questions, you can leave a message to us below!

Reference: https://cloud.tencent.com/developer/article/1092668 React third-party component 4 (the use of Reflux for state management ① simple use)-Cloud + Community-Tencent Cloud