[React] react环境搭建一版 (3)

阮一峰react-redux

安装redux npm i redux react-redux --save 新建/app/store/store.js import {createStore} from 'redux'; import user from '../components/content01.reducer'; const store = createStore(user); export default store; 修改/app/app.js import {Provider} from 'react-redux'; import store from './store/store'; ReactDom.render( <Provider store={store}> <BrowserRouter> <Route path="http://www.likecs.com/" component={App}/> </BrowserRouter> </Provider> , document.getElementById('root') ); 新建/app/component/content01.reducer.js let initState = { data: [{ name: 'doudou', age: 32, phone: 123456789, email: '123456789@163.com', key: 1, }] }; function user(state = initState, action) { const data = state.data; switch (action.type) { case 'ADD_ONE_USER': data[data.length] = action.payload; return {data: data}; default: return state; } } export default user; 新建/app/component/content01.action.js export function addOneUser(value) { return { type: 'ADD_ONE_USER', payload: value } } 修改/app/component/content01.jsx import React from 'react'; import {Table, Icon, Button} from 'antd'; import {connect} from 'react-redux'; import {addOneUser} from './content01.action'; import FromContent from './FromContent'; class Content01 extends React.Component { constructor(props) { super(props); this.state = { visible: false, date: null }; this.showModal = () => { this.setState({ visible: true, data: new Date() }); }; this.closeModal = () => { this.setState({ visible: false, }); }; this.submit = (values) => { values.key = Date.parse(new Date()); this.props.addOneUser(values); this.closeModal(); } } render() { const columns = [{ title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '电话号码', dataIndex: 'phone', key: 'phone', }, { title: '邮箱', dataIndex: 'email', key: 'email', }]; const data = this.props.data; return ( <div> <Button type="primary" onClick={this.showModal}> <Icon type="user-add"/>添加 </Button> <Table columns={columns} dataSource={data}/> { this.state.visible ? <FromContent date={this.state.date} submit={this.submit} showModal={this.showModal} closeModal={this.closeModal} /> : null } </div> ) } } const mapStateToProps = (state) => { return { data: state.data } }; const mapDispatchToProps = (dispatch) => { return { addOneUser: (value) => dispatch(addOneUser(value)) } }; export default connect(mapStateToProps, mapDispatchToProps)(Content01); 新建/app/component/FromContent.js import React from 'react'; import {Modal, Button, Form, Input} from 'antd'; const FormItem = Form.Item; import {increaseAction} from './content01.action'; class FromContent01 extends React.Component { constructor(props) { super(props); this.handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); this.props.submit(values); } }); } } render() { const {getFieldDecorator} = this.props.form; const {closeModal, date} = this.props; return ( <Modal title="添加一个成员" key={date} visible={true} onCancel={closeModal} footer={null} > <Form onSubmit={this.handleSubmit} className="login-form"> <FormItem label="姓名"> {getFieldDecorator('name', { rules: [{required: true, message: 'Please input your name!'}], })( <Input placeholder="姓名"/> )} </FormItem> <FormItem label="年龄"> {getFieldDecorator('age', { rules: [{required: true, message: 'Please input your age!'}], })( <Input placeholder="年龄"/> )} </FormItem> <FormItem label="电话号码"> {getFieldDecorator('phone', { rules: [{ required: true, message: 'Please input your phone!', }], })( <Input type="电话号码"/> )} </FormItem> <FormItem label="邮箱"> {getFieldDecorator('email', { rules: [{ required: true, message: 'Please input your email!', }], })( <Input type="邮箱"/> )} </FormItem> <FormItem> <Button type="primary" htmlType="submit" className="login-form-button"> Log in </Button> </FormItem> </Form> </Modal> ) } } const FromContent = Form.create()(FromContent01); export default FromContent; 09.更好的使用redux

redux-freeze运行时报错机制

redux-thunkredux的异步中间件

redux-logger日志中间件

redux-immutable在不可变数据类型中合并reducer

redux-create-reducer使用action和reducer的关联变的简单