add mock and UI

README.md

@@ -26,6 +26,7 @@ this.setState是异步的，不要指望它会立即映射为新的值、
 - 使用 PropTypes 进行类型检查
 
 - 当一个组件的state或者props发生改变的时候的，render函数就会被重新执行
+- 无状态组件性能更加，是一个函数，而普通组件是一个类，有更多的生命周期函数
 
 ### 虚拟DOM
 - Reat渲染流程(没有虚拟DOM的时候)
@@ -109,4 +110,11 @@ getDerivedStateFromProps函数
 1. react中绑定this指向时放在constructor里，保证绑定只会执行一次，不会做不必要的性能浪费
 2. setState函数有多个时，会被react进行异步的操作，放在一起进行操作，不会浪费性能。
 3. 虚拟DOM的优化
-4. shouldComponentUpdate生命周期函数的使用，可以避免多余的render的浪费
+4. shouldComponentUpdate生命周期函数的使用，可以避免多余的render的浪费
+
+## Redux
+
+1. store必须唯一的，只有store能改变自己的内容
+2. reducer 拿到之前的数据state， 以及即将改变的数据action
+3. reducer可以接收state的数据，但是绝不能修改state的内容
+4. reducer必须为纯函数(固定的输入就会有固定的输出，而且没有副作用)

src/List.js

@@ -1,41 +1,74 @@
 import React, { Component } from 'react';
-import { Input, Button, List } from 'antd';
 import store from './store/index.js';
 import 'antd/dist/antd.css';
+import ListUI from './ListUI';
+import axios from 'axios';
+import { 
+  getInputChangeAction,
+  getAddItemAction,
+  getDeleteItemAction, 
+  initListAction
+} from './store/actionCreator';
 
-// 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 Todo extends Component {
   constructor(props) {
     super(props);
     this.state = store.getState();
-    console.log(this.state)
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleStoreChange = this.handleStoreChange.bind(this);
+    this.handleBtnClick = this.handleBtnClick.bind(this);
+    this.handleItemDelete = this.handleItemDelete.bind(this);
+    store.subscribe(this.handleStoreChange);
   }
   render() {
     return (
-      <div>
-        <div style={{marginTop: '10px'}}>
-          <Input placeholder="todo info" style={{width: '300px', marginLeft: '10px'}}/>
-          <Button type="primary">提交</Button>
-        </div>
-        <List
-          style={{marginTop: '10px', width:'300px'}}
-          bordered
-          dataSource={this.state.list}
-          renderItem={item => (
-            <List.Item>
-              {item}
-            </List.Item>
-          )}
-        />
-      </div>
+      <ListUI 
+        inputValue={this.state.inputValue}
+        list={this.state.list}
+        handleInputChange={this.handleInputChange}
+        handleBtnClick={this.handleBtnClick}
+        handleItemDelete={this.handleItemDelete}
+      />
     )
   }
+  componentDidMount() {
+    axios.get('http://mock-api.com/wnaDJkg1.mock/jsonlist')
+      .then((res) => {
+        const data  = res.data;
+        const action = initListAction(data)
+        store.dispatch(action)
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+  handleInputChange(e) {
+    // const action = {
+    //   type: CHANGE_INPUT_VALUE,
+    //   value: e.target.value
+    // }
+    const action = getInputChangeAction(e.target.value)
+    store.dispatch(action)
+  }
+  handleStoreChange() {
+    // console.log('storechange')
+    this.setState(store.getState)
+  }
+  handleBtnClick() {
+    // const action = {
+    //   type: ADD_TODO_ITEM, 
+    // }
+    const action = getAddItemAction()
+    store.dispatch(action)
+  }
+  handleItemDelete(index) {
+    // const action = {
+    //   type: DELETE_TODO_ITEM,
+    //   index
+    // }
+    const action = getDeleteItemAction(index)
+    store.dispatch(action)
+  }
 }
 
 export default Todo;

src/ListUI.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Input, Button, List } from 'antd';
+
+// 无状态组件
+const ListUI = (props) => {
+  return(
+    <div>
+      <div style={{marginTop: '10px'}}>
+        <Input 
+          value={props.inputValue}
+          placeholder="todo info" 
+          style={{width: '300px', marginRight: '10px'}}
+          onChange={props.handleInputChange}
+        />
+        <Button type="primary" onClick={props.handleBtnClick}>提交</Button>
+      </div>
+      <List
+        style={{marginTop: '10px', width:'300px'}}
+        bordered
+        dataSource={props.list}
+        renderItem={(item) => (
+          <List.Item onClick={(index) => {
+            props.handleItemDelete(index)
+          }}>
+            {item}
+          </List.Item>
+        )}
+      />
+    </div>
+  )
+}
+//普通UI组件
+// class  ListUI extends Component {
+//   render() {
+//     return(
+//       <div>
+//         <div style={{marginTop: '10px'}}>
+//           <Input 
+//             value={this.props.inputValue}
+//             placeholder="todo info" 
+//             style={{width: '300px', marginRight: '10px'}}
+//             onChange={this.props.handleInputChange}
+//           />
+//           <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
+//         </div>
+//         <List
+//           style={{marginTop: '10px', width:'300px'}}
+//           bordered
+//           dataSource={this.props.list}
+//           renderItem={(item) => (
+//             <List.Item onClick={(index) => {
+//               this.props.handleItemDelete(index)
+//             }}>
+//               {item}
+//             </List.Item>
+//           )}
+//         />
+//       </div>
+//     )
+//   }
+// }
+export default ListUI

src/store/actionCreator.js

@@ -0,0 +1,17 @@
+import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM, INIT_LIST_ACTION } 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
+});
+export const initListAction = (data) => ({
+  type: INIT_LIST_ACTION,
+  data
+});

src/store/actionTypes.js

@@ -0,0 +1,6 @@
+//增加一个类型文件，
+// 在action.type里用字符串的时候，拼写错误是不会报错的，所以加一个类型文件
+export const CHANGE_INPUT_VALUE = 'change_input_value';
+export const ADD_TODO_ITEM = 'add_todo_item';
+export const DELETE_TODO_ITEM = 'delete_todo_item';
+export const INIT_LIST_ACTION = 'init_list_action';

src/store/index.js

@@ -1,6 +1,9 @@
 import { createStore } from 'redux';
 import reducer from './reducer';
 
-const store = createStore(reducer);
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
 
 export default store;

src/store/reducer.js

@@ -1,8 +1,38 @@
+import  {
+  CHANGE_INPUT_VALUE,
+  ADD_TODO_ITEM,
+  DELETE_TODO_ITEM,
+  INIT_LIST_ACTION
+} from './actionTypes';
+
 const defaultState = {
-  inputValue: '123',
-  list: [1, 2]
+  inputValue: '',
+  list: []
 }
-
+//拿到之前的数据state， 以及即将改变的数据action
+//reducer 可以接受state， 但是绝不能修改修改state
 export default (state = defaultState, action) => {
+  // console.log(state, action)
+  if(action.type === CHANGE_INPUT_VALUE){
+    const newState = JSON.parse(JSON.stringify(state)); //深拷贝
+    newState.inputValue = action.value;
+    return newState;
+  }
+  if(action.type === INIT_LIST_ACTION){
+    const newState = JSON.parse(JSON.stringify(state)); //深拷贝
+    newState.list = action.data;
+    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;
 }