1.在src目录下新建一个index.js文件
文件内容如下:
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList/>, document.getElementById('root'));
2..在src目录下新建一个Todolist.js文件是index.js的组件
3.安装antd依赖 $ npm install antd --save $ yarn add antd
4.引入antd包和需要的组件
import React , { Component } from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
import store from './store';
class TodoList extends Component{
render() {
return (
<div style={{marginTop : 80, marginLeft : 500}}>
<div>
<Input placeholder="Todo info" style={{width : 300,marginRight : 10}}
/>
<Button type="primary" >提交</Button>
</div>
<List
style={{marginTop : 10 , width : 300}}
size="small"
bordered
dataSource={this.state.List}
renderItem={(item,index) => (<List.Item >{item}</List.Item>)}
/>
)
}
}
export default TodoList;
5.在src目录下建立store文件夹
6.在store文件夹下建立index.js文件
7.安装redux包 yarn add redux
8.在store文件夹下的index中引入redux 代码如下:
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;
9.建立了store数据仓库需要reducer文件来操作数据
10.在store文件夹下建立一个reducer.js文件 代码如下:
const defaultState = {
inputValue : "123",
List : []
}
export default (state = defaultState,action) => {
return state;
}
11.在TodoList.js文件下引入store文件夹下的index.js文件
import store from './store';
12.在TodoList.js文件中取得store中的数据
this.state = store.getState();
13.把store中的数据添加到input的value值上并且改变store中的数据,并添加上一个onChange的方法
<Input placeholder="Todo info" value={this.state.inputValue} style={{width : 300,marginRight : 10}}
onChange = {this.handelInputChange}
14.在handelInputChange方法中发送action到reducer中来改变input的value值
handelInputChange (e) {
const action= {
type : 'Change_input_value',
value : e.target.value
}
store.dispatch(action);
}
15.reducer.js文件接收Component发过来的action来处理数据
const defaultState = {
inputValue : "123",
List : []
}
export default (state = defaultState,action) => {
//注意:reducer可以接收state 但绝对不能修改state只能深拷贝出来
if(action.type==="Change_input_value"){
//拷贝state
const newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
return state;
}
16.当reducer中的条件成立返回一个新的state给store
17.此时store需要把新的数据给到Component需要用到一个方法
store.subscribe();用这个方法来订阅store中的数据,如果store中的数据发送改变将自动执行这个函数
18.把store.subscribe();方法添加到TodoList.js的 constructor中并为其添加一个函数
constructor(props) {
super(props);
store.subscribe(this.handleStoreChange);
}
19.函数内容如下:
handleStoreChange() {
this.setState(store.getState());
}
20.只要store中的数据发生改动,就会调用上面方法来重新渲染DOM