react+redux demo

demo使用redux+react-router-dom+antd实现一个简单的用户列表添加用户。

创建actions

---

 

export default {
    USER_ADD_IN:'USER_ADD_IN',
    USER_ADD_SUCCESS:'USER_LOGIN_SUCCESS',
    USER_ADD_TEXT:'USER_ADD_TEXT',
    USER_ADD_CLEAR:'USER_ADD_CLEAR'
};

import UserAction from './users/UserAction'
export default {
    ...UserAction
};

import ActionTypes from '../ActionTypes'

export default class UserCommand {
    static addUser(userInfo){
        return (dispatch)=>{
            dispatch({
                type: ActionTypes.USER_ADD_IN,
                userInfo: userInfo
            });
            setTimeout(()=>{
                dispatch({
                    type: ActionTypes.USER_ADD_SUCCESS,
                    userInfo: userInfo
                });
            },2000);
        }
    }
}

 

创建reducers

---

 

import ActionsType from '../../actions/ActionTypes'
const initialState={
    status:null,
    userInfo:{}
};
export default function Users(state = initialState, action) {
    switch(action.type){
        case ActionsType.USER_ADD_SUCCESS:
        case ActionsType.USER_ADD_IN:
        case ActionsType.USER_ADD_TEXT:
        case ActionsType.USER_ADD_CLEAR:
            return {
                ...state,
                status:action.type,
                userInfo:action.userInfo
            };
            break;
        default:
            return state;
            break;
    }
}

import Users from './Users'
export default {
    userStore:Users
};

import {
    combineReducers
} from 'redux'
import Users from './users'
export default combineReducers({
    ...Users
});

 

创建store

---

import {
    createStore,
    applyMiddleware,
    combineReducers
} from 'redux'
import thunk from 'redux-thunk'
import * as reducers from '../reducers'
const logger = store => next => action => {
    if (typeof action === 'function') console.log('dispatching a function');
    else console.log('dispatching', action);
    let result = next(action);
    console.log('next state', store.getState());
    return result;
};
const middlewares = [thunk, logger];

const createSoreWithMiddleware = applyMiddleware(...middlewares)(createStore);

export default function configureStore(initialState) {
    const reducer = combineReducers(reducers);
    return createSoreWithMiddleware(reducer, initialState);
}

 

View

---

import React, {
    Component
} from 'react'
import {List, Button, Input, Row, Col} from 'antd';
import {connect} from 'react-redux'
import ActionTypes from '../actions/ActionTypes'
import UserCommand from '../actions/users/UserCommand'

class UserList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                'user1',
                'user2'
            ]
        };
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.status === ActionTypes.USER_ADD_TEXT)
            return true;
        else if (nextProps.status === ActionTypes.USER_ADD_IN)
            return true;
        else if (nextProps.status === ActionTypes.USER_ADD_SUCCESS) {
            this.state.data.push(nextProps.userInfo.userName);
            this.clearUserName();
            return true;
        }
        else if (nextProps.status === ActionTypes.USER_ADD_CLEAR)
            return true;
    }

    userInputChange(event) {
        this.props.dispatch({
            type: ActionTypes.USER_ADD_TEXT,
            userInfo: {
                userName: event.target.value
            }
        });
    }

    addHandler() {
        if (this.props.userInfo.userName)
            this.props.dispatch(UserCommand.addUser({
                userName: this.props.userInfo.userName
            }));
    }

    clearUserName() {
        this.props.dispatch({
            type: ActionTypes.USER_ADD_TEXT,
            userInfo: {
                userName: ''
            }
        });
    }

    render() {
        return (
            <div>
                <Row type="flex" justify="start">
                    <Col span={4}>
                        <Input size="small" value={this.props.userInfo.userName} placeholder="用户名"
                               onChange={(event) => this.userInputChange(event)}/>
                    </Col>
                    <Col span={1}>
                        <Button type="primary" onClick={() => this.addHandler()} size="small"
                                loading={this.props.status === ActionTypes.USER_ADD_IN ? true : false}>Add</Button>
                    </Col>
                </Row>
                <List
                    header={<div>用户名</div>}
                    bordered
                    dataSource={this.state.data}
                    renderItem={item => (<List.Item>{item}</List.Item>)}
                />
            </div>
        );
    }
}

function select(store) {
    return {
        userInfo: store.default.userStore.userInfo,
        status: store.default.userStore.status,
    }
}

export default connect(select)(UserList);

 完整demo:https://github.com/lemonzwt/react-demo