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

微信公众号首发

本教程总共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 Reactfrom '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}) =>

className="nav">

to="/Router/Dome1" activeClassName="selected">demo1

to="/Router/Dome2" activeClassName="selected">demo2

exact path="/"

render={() => ()}/>

path={`${match.url}/Dome1`}component={() =>BundleFun(Dome1)}/>

path={`${match.url}/Dome2`}component={(props) =>BundleFun(Dome2, props)}/>

;

export default Index;

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

import Reactfrom '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}) =>

className="nav">

to="/ReFast/Dome3" activeClassName="selected">demo3

to="/ReFast/Dome4" activeClassName="selected">demo4

to="/ReFast/Dome5" activeClassName="selected">demo5

to="/ReFast/Dome6" activeClassName="selected">demo6

to="/ReFast/Dome7" activeClassName="selected">demo7

exact path={`${match.url}`}

render={() => ()}/>

path={`${match.url}/Dome3`}component={Dome3}/>

path={`${match.url}/Dome4`}component={Dome4}/>

path={`${match.url}/Dome5`}component={Dome5}/>

path={`${match.url}/Dome6`}component={Dome6}/>

path={`${match.url}/Dome7`}component={Dome7}/>

;

export default Index;

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

import Reactfrom '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 = () =>

className="content">

className="nav">

to="/Router" activeClassName="selected">router

to="/ReFast" activeClassName="selected">refast

path="/Router" component={Router}/>

path="/ReFast" component={ReFast}/>

;

export default Index;

2、Flux目录

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

Index.jsx 完整代码

import Reactfrom 'react';

class Indexextends React.Component {

constructor(props) {

super(props);

this.state = {};

}

componentDidMount() {

}

render() {

return (

flux

);

}

}

export default Index;

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

完整代码如下：

import Reactfrom 'react';

import {HashRouter, Route, NavLink, Redirect}from 'react-router-dom';

import Flux1from './flux1/Index'

const Index = ({match}) =>

className="nav">

to="/Flux/Flux1" activeClassName="selected">Flux1

exact path={`${match.url}`}

render={() => ()}/>

path={`${match.url}/Flux1`}component={Flux1}/>

;

export default Index;

修改 deom 下Index.jsx

import Reactfrom 'react';

import {HashRouter, Route, NavLink}from 'react-router-dom'

import Router from './router/Index'

import ReFast from './refast/Index'

import Fluxfrom './flux/Index'

import '../../public/css/demo.pcss'

const Index = () =>

className="content">

className="nav">

to="/Router" activeClassName="selected">router

to="/ReFast" activeClassName="selected">refast

to="/Flux" activeClassName="selected">Flux

path="/Router" component={Router}/>

path="/ReFast" component={ReFast}/>

path="/Flux" component={Flux}/>

;

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 Reactfrom 'react';

const Main = (props) =>

       {props.state ||0}+

;

export default Main;

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

2、我们建立Store.js文件

我们需要安装下 flux

npm i -S flux

import {ReduceStore}from 'flux/utils';

import ActionTypesfrom './ActionTypes';

import Dispatcherfrom './Dispatcher';

class TodoEditStoreextends 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 ActionTypesfrom './ActionTypes';

import Dispatcherfrom './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 Actionsfrom './Actions';

import Storefrom './Store';

function getStores() {

return [

Store

];

}

function getState() {

return {

state: Store.getState(),

       add: Actions.add,

   };

}

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

7、查看浏览器

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!