### redux简介
- redux是一个配合react视图层框架使用的数据层框架
- 方便大型react项目之中的复杂组件传值
- 耦合性高的数据使用redux管理
- redux中包含 组件，store，reducer
#### redux数据流向
- store就像一个图书管理员
- 图书管理员会给每个需要借书的人发一个通讯工具（store)
- 通讯工具store有一个方法叫做subscribe()，每当图书馆的图书有变化，这个方法就会自动执行
- 通讯工具store提供一个getState()方法，方便借书人立马得到最新的图书馆数据，配合subscribe()使用
- 通讯工具store提供一个dispatch()方法，方便借书人传达他想借阅的书籍名称
- reducer是图书管理员的查询手册
- 他是图书管理员的查询手册，当图书管理员接到借书人的消息后，他会查阅reducer
- 图书馆管理员也是通过查询手册确定数据的更新
- 查询手册返回的是一个方法，这个方法有2个参数（state，action）
- state就是图书馆数据，action是借书人通过store传递过来的参数，也就是书名，通过action，查询手册才能查询到数据
- reducer返回的方法不能直接更改state
- 组件就像借书人
- 借书人需要借书，通过图书管理员提供的通讯工具store提供的dispatch方法，传达他要借的书（action）
- 借书人通过图书管理员提供的通讯工具store提供的subscribe()和getState()获取图书管的最新咨询
### 创建项目
- create-react-app todo-list
- 注意项目名称不能有大写字母
### 删除不必要文件
- src目录中的：App.css, App.test.js, logo.svg, serviceWorker.js文件
- public目录中的: manifest.json文件
### 安装依赖
- yarn add antd
- yarn add redux
### 入口index.js编写
1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 import App from './App'; // 引入万年老二组件 4 5 ReactDOM.render(<App />, document.getElementById('root'));
### 创建redux的store
- index.js
1 /** 2 * store就像一个图书管理员，在接到组件（借书人）派发的 dispatch（借书人说的话） 时， 3 * 他本身不知道书在什么位置，有没有这本书，需要查询 reducer （图书列表） 4 */ 5 import { createStore } from 'redux' 6 import todoListReducer from './reducer' // 引入图书列表 7 8 9 const store = createStore(todoListReducer) // 查询图书列表 10 11 12 export default store
- reducer.js
1 /** 2 * reducer 相当于图书管理员 store 的查询手册， 3 * 通过查询手册，确认组件 借书人人需要的书在什么地方。 4 */ 5 const todoState = { 6 inputValue : "", 7 list: [] 8 } 9 10 export default (state=todoState, action) => { 11 if ( action.type === 'change_input_value'){ // 确认书名， 执行动作 12 const newState = JSON.parse(JSON.stringify(state)) 13 newState.inputValue = action.value 14 console.log(newState) 15 return newState 16 } 17 if ( action.type === 'change_list_value'){ // 确认书名， 执行动作 18 const newState = JSON.parse(JSON.stringify(state)) 19 newState.list = [...state.list, action.item] 20 newState.inputValue = '' 21 console.log(newState.list) 22 return newState 23 } 24 return state 25 }
### 编写html结构
- 在App.js中引入所需依赖
- 1. antd的样式
- 2. antd的组件
- 3. react
- 4. store
1 /** 2 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store） 3 */ 4 /** 5 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store） 6 */ 7 8 /** 9 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store） 10 */ 11 12 import React, { Component, Fragment }from 'react'; 13 import { Input, Button, List, message } from "antd"; 14 import store from './store'; // 引入图书管理员 store 15 import "antd/dist/antd.css"; 16 class App extends Component { 17 constructor(props){ 18 super(props) 19 this.state = store.getState() 20 console.log(store.getState()) 21 this.handleInputChange = this.handleInputChange.bind(this); 22 this.addTodoList = this.addTodoList.bind(this); 23 this.handleStroeChange = this.handleStroeChange.bind(this); 24 // this.deletTodoList = this.deletTodoList.bind(this); 25 store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人，图书馆书籍的变化 26 } 27 28 render() { 29 return ( 30 <Fragment> 31 <div style={{ marginTop: '10px', marginLeft: '10px'}}> 32 <Input 33 placeholder='todo-list' 34 style={{width: '300px', marginRight: '10px'}} 35 onChange = { this.handleInputChange } 36 value = { this.state.inputValue } 37 /> 38 <Button 39 type="primary" 40 onClick = { this.addTodoList } 41 >提交</Button> 42 </div> 43 <List 44 style={{width: '300px', marginLeft: '10px', marginTop: '5px'}} 45 size="large" 46 bordered 47 dataSource={ this.state.list ? this.state.list : null } 48 renderItem={ (item, index) => <List.Item style={{position:'relative'}}> 49 {item} 50 <Button 51 type='danger' 52 style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}} 53 onClick={ this.deletTodoList.bind(this, index) } 54 >删除</Button> 55 </List.Item>} 56 /> 57 </Fragment> 58 ); 59 } 60 handleInputChange(e) { 61 const action = { 62 type: 'change_input_value', // 借什么书 63 value: e.target.value 64 } 65 store.dispatch(action); // 传达给store 66 console.log(e.target.value) 67 } 68 addTodoList() { 69 if (this.state.inputValue) { 70 const action = { 71 type: 'change_list_value', 72 item: this.state.inputValue 73 } 74 store.dispatch(action) 75 } else { 76 message.warning('请输入内容'); 77 } 78 } 79 deletTodoList(index) { 80 const action = { 81 type: 'delet_list_value', 82 value: index 83 } 84 store.dispatch(action) 85 } 86 handleStroeChange() { 87 this.setState(store.getState()) // 每当图书馆有变化的时候，图书管理员（store）通过这个方式告诉借书人（组件） 88 } 89 } 90 91 export default App;
来源：博客园
作者：一目沉浮
链接：https://www.cnblogs.com/boye-1990/p/11453246.html