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);