React第三方组件3(状态管理之Flux的使用①简单使用)

前端人人

发布于 2018-04-11 17:23:50

1.8K00

代码可运行

文章被收录于专栏：前端人人前端人人

运行总次数：0

代码可运行

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件3(状态管理之Flux的使用①简单使用)---2018.03.06

2、React第三方组件3(状态管理之Flux的使用②TodoList上)---2018.03.07

3、React第三方组件3(状态管理之Flux的使用③TodoList中)---2018.03.08

4、React第三方组件3(状态管理之Flux的使用④TodoList下)---2018.03.09

5、React第三方组件3(状态管理之Flux的使用⑤异步操作)---2018.03.12

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

本节课开始前，我们先把工程目录调整下！

目前是这样的

1、我们新建 router 和 refast 文件夹，并把demo1、demo2放到router 文件夹中，demo3-7放到 refast 文件夹中！

然后我们分别在 router 和 refast 中建立 Index文件，并设置路由

router 文件夹下Index.jsx 完整代码

import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import {BundleFun} from '../../common/Bundle'
import Dome1 from './demo1/Demo1.bundle'
import Dome2 from './demo2/Demo2.bundle'

const Index = ({match}) =>
    <HashRouter>
        <div>
            <div className="nav">
                <NavLink to="/Router/Dome1" activeClassName="selected">demo1</NavLink>
                <NavLink to="/Router/Dome2" activeClassName="selected">demo2</NavLink>
            </div>
            <Route exact path="/"
                   render={() => (<Redirect to="/Dome1"/>)}/>
            <Route path={`${match.url}/Dome1`} component={() => BundleFun(Dome1)}/>
            <Route path={`${match.url}/Dome2`} component={(props) => BundleFun(Dome2, props)}/>
        </div>
    </HashRouter>
;
export default Index;

refast 文件夹下 Index.jsx 完整代码

import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import Dome3 from './demo3/Index'
import Dome4 from './demo4/Index'
import Dome5 from './demo5/Index'
import Dome6 from './demo6/Index'
import Dome7 from './demo7/Index'

const Index = ({match}) =>
    <HashRouter>
        <div>
            <div className="nav">
                <NavLink to="/ReFast/Dome3" activeClassName="selected">demo3</NavLink>
                <NavLink to="/ReFast/Dome4" activeClassName="selected">demo4</NavLink>
                <NavLink to="/ReFast/Dome5" activeClassName="selected">demo5</NavLink>
                <NavLink to="/ReFast/Dome6" activeClassName="selected">demo6</NavLink>
                <NavLink to="/ReFast/Dome7" activeClassName="selected">demo7</NavLink>
            </div>
            <Route exact path={`${match.url}`}
                   render={() => (<Redirect to={`${match.url}/Dome3`}/>)}/>
            <Route path={`${match.url}/Dome3`} component={Dome3}/>
            <Route path={`${match.url}/Dome4`} component={Dome4}/>
            <Route path={`${match.url}/Dome5`} component={Dome5}/>
            <Route path={`${match.url}/Dome6`} component={Dome6}/>
            <Route path={`${match.url}/Dome7`} component={Dome7}/>
        </div>
    </HashRouter>
;

export default Index;

demo文件夹下Index.jsx完整代码

import React from 'react';
import {HashRouter, Route, NavLink} from 'react-router-dom'
import Router from './router/Index'
import ReFast from './refast/Index'
import '../../public/css/demo.pcss'

const Index = () =>
    <HashRouter>
        <div className="content">
            <div className="nav">
                <NavLink to="/Router" activeClassName="selected">router</NavLink>
                <NavLink to="/ReFast" activeClassName="selected">refast</NavLink>
            </div>
            <br/>
            <Route path="/Router" component={Router}/>
            <Route path="/ReFast" component={ReFast}/>
        </div>
    </HashRouter>
;

export default Index;

2、Flux目录

新建flux文件夹，并建立其子文件夹flux1，然后在flux1下建立Index.jsx

Index.jsx 完整代码

import React from 'react';

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                flux
            </div>
        );
    }
}

export default Index;

在flux目录下建立Index.jsx文件

完整代码如下：

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

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

export default Index;

修改 deom 下Index.jsx

import React from 'react';
import {HashRouter, Route, NavLink} from 'react-router-dom'
import Router from './router/Index'
import ReFast from './refast/Index'
import Flux from './flux/Index'
import '../../public/css/demo.pcss'

const Index = () =>
    <HashRouter>
        <div className="content">
            <div className="nav">
                <NavLink to="/Router" activeClassName="selected">router</NavLink>
                <NavLink to="/ReFast" activeClassName="selected">refast</NavLink>
                <NavLink to="/Flux" activeClassName="selected">Flux</NavLink>
            </div>
            <br/>
            <Route path="/Router" component={Router}/>
            <Route path="/ReFast" component={ReFast}/>
            <Route path="/Flux" component={Flux}/>
        </div>
    </HashRouter>
;

export default Index;

3、查看浏览器

接下来我们来学习flux

我们结合阮一峰老师的教程来讲讲！

地址：http://www.ruanyifeng.com/blog/2016/01/flux.html

Flux 是什么

简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。 Flux存在多种实现（至少15种），本文采用的是Facebook官方实现。

基本概念

1、View：视图层 2、Action（动作）：视图层发出的消息（比如mouseClick） 3、Dispatcher（派发器）：用来接收Actions、执行回调函数 4、Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

特点

1、用户访问 View 2、View 发出用户的 Action 3、Dispatcher 收到 Action，要求 Store 进行相应的更新 4、Store 更新后，发出一个"change"事件 5、View 收到"change"事件后，更新页面

我们开始撸码！

1、显示我们建立View 即Main.jsx文件

import React from 'react';

const Main = (props) =>
    <div className="todoList">
        {props.state || 0}<button onClick={props.add.bind(this,1)}>+</button>
    </div>
;

export default Main;

这个Main.jsx 希望能从父组件拿到 state状态、和add方法

2、我们建立Store.js文件

我们需要安装下 flux

npm i -S flux

import {ReduceStore} from 'flux/utils';
import ActionTypes from './ActionTypes';
import Dispatcher from './Dispatcher';

class TodoEditStore extends ReduceStore {
    constructor() {
        super(Dispatcher);
    }

    getInitialState() {
        return 0;
    }

    reduce(state, action) {
        switch (action.type) {
            case ActionTypes.ADD:
                return state + action.text;
            default:
                return state;
        }
    }
}

export default new TodoEditStore();

3.我们建立ActionTypes.js

const ActionTypes = {
    ADD: 'ADD',
};

export default ActionTypes;

4、我们建立Dispatcher.js

import {Dispatcher} from 'flux';

export default new Dispatcher();

5、建立Actions.js

import ActionTypes from './ActionTypes';
import Dispatcher from './Dispatcher';

const Actions = {
    add(text) {
        Dispatcher.dispatch({
      type: ActionTypes.ADD,
      text,
    });
  }
};

export default Actions;

6、建立连接，新建Index.jsx

import Main from './Main';
import {Container} from 'flux/utils';
import Actions from './Actions';
import Store from './Store';

function getStores() {
    return [
        Store
    ];
}

function getState() {
    return {
        state: Store.getState(),
        add: Actions.add,
    };
}

export default Container.createFunctional(Main, getStores, getState);