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

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

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

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

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

import {Dispatcher} from 'flux';

export default new Dispatcher();

6、建立TodoStore.js

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

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;