安装npm install --save redux

1.src目录下创建store目录，并在store目录创建reducer.js，在reducer.js内添加以下代码：

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes';
const defaultState = {
	inputValue: '',
	list: []
}

// reducer 可以接收state，但是绝不能修改state
// 纯函数指的是给固定的输入，就一定会有固定的输出，而且不对输入的参数进行修改
export default(state = defaultState, action) => {
	if (action.type === CHANGE_INPUT_VALUE) {
		const newState = JSON.parse(JSON.stringify(state));
		newState.inputValue = action.value;
		return newState;
	}
	if (action.type === ADD_TODO_ITEM) {
		const newState = JSON.parse(JSON.stringify(state));
		newState.list.push(newState.inputValue);
		newState.inputValue = '';
		return newState;
	}
	if (action.type === DELETE_TODO_ITEM) {
		const newState = JSON.parse(JSON.stringify(state));
		newState.list.splice(action.index, 1);
		return newState;
	}
	return state;
}

2.在store目录创建index.js文件，放入以下代码：

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(
	reducer,
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

3.在store目录创建actionCretor.js，放入以下代码：

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes';

export const getInputChangeAction = (value) => ({
	type: CHANGE_INPUT_VALUE,
	value
})

export const getAddItemAction = () => ({
	type: ADD_TODO_ITEM
})

export const getDeleteItemAction = (index) => ({
	type: DELETE_TODO_ITEM,
	index
})

4.src目录创建actionTypes.js，放入以下代码：

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

5.src目录创建TodoList.js，放入以下代码：

import React, { Component, Fragment } from 'react';
import 'antd/dist/antd.css';
import { Input } from 'antd';
import { Button } from 'antd';
import { List, Typography, Divider } from 'antd';
import store from './store/index';
import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators';
	
class TodoList extends Component {
	
	constructor(props) {
		super(props);
		this.state = store.getState();
		this.handleInputChange = this.handleInputChange.bind(this);
		this.handleStoreChange = this.handleStoreChange.bind(this);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		// 订阅store，只要store里面的数据改变，就会自动去执行这里的函数
		store.subscribe(this.handleStoreChange);
	}

	render() {
		return (
			<div style={{marginTop:'10px'}}>
			<div>
				<Input value={this.state.inputValue} placeholder="todolist" style={{width: '300px', marginRight: '10px'}}
				onChange={this.handleInputChange}
				/>
				<Button type="primary" onClick={this.handleBtnClick}>Primary Button</Button>
			</div>
			<List
				  style={{marginTop: '10px', width: '300px'}}
			      bordered
			      dataSource={this.state.list}
			      renderItem={(item, index) => (
			        <List.Item onClick={this.handleItemDelete.bind(this, index)}>
			          {item}
			        </List.Item>
			      )}
			    />
			</div>
		)
	}
	
	handleInputChange(e) {
		const action = getInputChangeAction(e.target.value);
		store.dispatch(action);
	}

	handleStoreChange(e) {
		this.setState(store.getState());
	}
	
	handleBtnClick(e) {
		const action = getAddItemAction();
		store.dispatch(action);
	}
	
	handleItemDelete(index) {
		const action = getDeleteItemAction(index);
		store.dispatch(action);
	}
}



export default TodoList;