Redux

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