第1.3章：Redux数据传递框架

1、Redux简介

Redux的设计理念是把数据放到Store里，统一管理

image.png

---

2、Redux工作流程

蓝色React Components：借书的人（组件）
黄色Action Creators：我要借什么书？（请求）
橙色Store：图书馆（数据仓库）
紫色Reducers：图书馆管理员（查找，数据仓库记录册）

Redux工作流程顺序：蓝色 > 黄色 > 橙色 > 紫色 > 橙色 > 蓝色

图书馆例子

---

3、Redux安装

yarn add redux

---

4、创建橘色Store 数据仓库

index.js页面内容如下（默认写法CV即可）

image.png

// 引入redux框架 调用 createStore 方法
import { createStore } from 'redux';
import reducer from './reducer';

// 定义 store 用 createStore() 方法，创建了一个数据的公共存储仓库
  const store = createStore(
    reducer, /* preloadedState, */
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

 export default store
 

---

5、创建紫色Reducers 接收数据并改变，最后返回给橘色Store

Reducers 接收(state， action)
state = defaultState、是以前默认旧数据
action、是当前要执行的操作

reducer.js页面内容如下

image.png

// defaultState 默认数据
const defaultState = {
  inputValue: '',
  list: [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
  ],
}

// Reducers 接收(state， action)
// state = defaultState、是以前默认旧数据
// action、当前要执行的操作
export default (state = defaultState, action) => {
  if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state)); // 定义 newState = 默认旧数据
    newState.inputValue = action.value; // 默认旧数据の.inputValue值 = action传过来の.新值
    return newState;  // 把新数据返回 stroe 替换旧数据
  }
  if (action.type === 'add_todo_Item') {
    const newState = JSON.parse(JSON.stringify(state));
    if (newState.inputValue !== '') {
      newState.list.push(newState.inputValue);
      newState.inputValue = '';
    }
    return newState;
  }
    if (action.type === 'del_todo_Item') {
      const newState = JSON.parse(JSON.stringify(state)); 
      newState.list.splice(action.index, 1);
      return newState; 
    }
  return state;
}

---

6、页面蓝色组件Components、黄色Action部分

黄色Action修改数据，传递给橙色Store和紫色Reducers，再返回给蓝色Components

image.png

import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
import store from './store';

export class TodoList extends Component {

  constructor(props) {
    super(props)

    this.state = store.getState(); // 获取 store 的所有数据内容
    this._StoreChange = this._StoreChange.bind(this);
    store.subscribe(this._StoreChange) // store 的数据发生改变，将新值传给组件
    
    this._onChangeInput = this._onChangeInput.bind(this);
    this._onClickBtn = this._onClickBtn.bind(this);
  }
  _StoreChange() { // 当数据改变是 执行该函数
    this.setState(store.getState()) // 获取 新数据内容
  }

    render() {
        return (
        <div style={{marginTop: '10px',marginLeft: '10px'}}>
            <h1>Hello World</h1>
            <Input 
                placeholder = "请输入"
                value={this.state.inputValue} 
                style={{width: '300px',marginRight: '10px'}}
                onChange={this._onChangeInput}
            />
            <Button type="primary" onClick={this._onClickBtn}>提交</Button>
            <List
                style={{marginTop: '10px', width: '300px'}}
                bordered
                dataSource={this.state.list}
                renderItem={(item, index) => 
                    <List.Item onClick={this._onClickListItemDel.bind(this, index)}>{item}</List.Item>
                }
            />
        </div>
        )
    }

    _onChangeInput(e) {
        const action = {
            type: "change_input_value",
            value: e.target.value
        }
        store.dispatch(action); // 发送 action 给 store
    }
  
    _onClickBtn() {
        const action = {
        type: "add_todo_Item",
        }
        store.dispatch(action);
    }

    _onClickListItemDel(index) {
        const action = {
        type: "del_todo_Item",
        index
        }
        store.dispatch(action);
    }
}

export default TodoList