1.Redux概念
——Redux把所有数据存储在store里进行管理,一个组件改变了store数据里的内容,其他的组件感知到store的变化,再来取数据,这样就实现了一个组件之间数据传递的功能
2.使用Antd实现ToList布局
import React,{Component,Fragment} from 'react';
import 'antd/dist/antd.css';
import {Input,Button,List} from 'antd';
import Item from 'antd/lib/list/Item';
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
];
class TodoList extends Component{
render(){
return(<div style={{marginTop:'10px',marginLeft:'10px'}}>
<Input placeholder='你好' style={{width:'300px',marginRight:'5px'}} />
<Button type='primary'>提交</Button>
<List
bordered
dataSource={data}
renderItem={Item=>(<List.Item>{Item}</List.Item>)}
style={{width:'300px',marginTop:'10px'}}
></List>
</div>)
}
}
export default TodoList;
3.Redux的工作流程
4.创建Redux中的Store
(1)下载安装redux
npm install redux
(2)创建文件夹 (3)写入代码 index.js里
import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
reducer.js里
const defaultState = {//仓库中存放的原始数据
inputValue : '123',
list : ['ha','ji','sjk']
}
export default(state=defaultState,action) => {
return state;
}
组件中用以下方法导出数据
this.state = store.getState();