前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React第三方组件3(状态管理之Flux的使用②TodoList上)

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

作者头像
前端人人
发布2018-04-11 17:23:21
7580
发布2018-04-11 17:23:21
举报
文章被收录于专栏:前端人人

本教程总共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

今天我们用Flux写下TodoList

1、在flux下新建flux2文件夹,并建立Index.jsx

代码语言:javascript
复制
import Main from './Main';
import {Container} from 'flux/utils';
import TodoActions from './TodoActions';
import TodoStore from './TodoStore';

function getStores() {
    return [
        TodoStore
    ];
}

function getState() {
    return {
        state: TodoStore.getState(),
        addTodo: TodoActions.addTodo,
    };
}

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

2、建立Main.jsx

代码语言:javascript
复制
import React from 'react';

class Input extends React.Component {
    render() {
        let {addTodo} = this.props;
        return (
            <div className="todoList">
                <input type="text" ref="todoInput"/>
                <button onClick={() => addTodo(this.refs['todoInput'].value)}>添加
                </button>
            </div>
        );
    }
}

class List extends React.Component {
    render() {
        let {list} = this.props.state;
        return (
            <div>
                {
                    list.length > 0 && list.map(data =>
                        <li key={data.id}>
                            {data.title}
                        </li>
                    )
                }
            </div>
        );
    }
}

const Index = (props) =>
    <div className="todoList">
        <Input {...props}/>
        <List {...props}/>
    </div>
;
export default Index;

3、建立TodoActions.js

代码语言:javascript
复制
import TodoActionTypes from './TodoActionTypes';
import TodoDispatcher from './TodoDispatcher';

const Actions = {
  addTodo(text) {
      TodoDispatcher.dispatch({
      type: TodoActionTypes.ADD_TODO,
      text,
    });
  }
};

export default Actions;

4、建立TodoActionTypes.js

代码语言:javascript
复制
import TodoActionTypes from './TodoActionTypes';
import TodoDispatcher from './TodoDispatcher';

const Actions = {
  addTodo(text) {
      TodoDispatcher.dispatch({
      type: TodoActionTypes.ADD_TODO,
      text,
    });
  }
};

export default Actions;

5、建立TodoDispatcher.js

代码语言:javascript
复制
import {Dispatcher} from 'flux';

export default new Dispatcher();

6、建立TodoStore.js

代码语言:javascript
复制
import {ReduceStore} from 'flux/utils';
import TodoActionTypes from './TodoActionTypes';
import TodoDispatcher from './TodoDispatcher';

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

    getInitialState() {
        return {list: []};
    }

    reduce(state, action) {
        let list = state.list;
        switch (action.type) {
            case TodoActionTypes.ADD_TODO:
                if (!action.text) {
                    alert('内容不能为空');
                    return state;
                }
                list.push({id: state.list.length + 1, title: action.text, status: 1});
                return {list};
            default:
                return state;
        }
    }
}

export default new TodoEditStore();

7、修改flux下Index.jsx

代码语言:javascript
复制
import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import Flux1 from './flux1/Index'
import Flux2 from './flux2/Index'

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

export default Index;

8、查看浏览器

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端人人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档