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數(shù)據倉庫需要reducer文件來操作數(shù)據
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中的數(shù)據
this.state = store.getState();
13.把store中的數(shù)據添加到input的value值上并且改變store中的數(shù)據泛源，并添加上一個onChange的方法
<Input placeholder="Todo info" value={this.state.inputValue} style={{width : 300,marginRight : 10}}
onChange = {this.handelInputChange}
14.在handelInputChange方法中發(fā)送action到reducer中來改變input的value值
handelInputChange (e) {
const action= {
type : 'Change_input_value',
value : e.target.value
}
store.dispatch(action);
}
15.reducer.js文件接收Component發(fā)過來的action來處理數(shù)據
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需要把新的數(shù)據給到Component需要用到一個方法
store.subscribe();用這個方法來訂閱store中的數(shù)據拔妥，如果store中的數(shù)據發(fā)送改變將自動執(zhí)行這個函數(shù)
18.把store.subscribe();方法添加到TodoList.js的 constructor中并為其添加一個函數(shù)
constructor(props) {
super(props);
store.subscribe(this.handleStoreChange);
}
19.函數(shù)內容如下：
handleStoreChange() {
this.setState(store.getState());
}
20.只要store中的數(shù)據發(fā)生改動，就會調用上面方法來重新渲染DOM
