redux的使用流程

redux

React只是DOM的一个抽象层

Web应用是一个状态机，视图与状态是一一对应的

所有的状态，保存在一个对象里面（唯一数据源）

需要使用redux的项目

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

从组件层面考虑，什么样子的需要redux：

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

redux有四个组成部分

store：用来存储数据

reducer：真正的来管理数据

actionCreators：创建action，交由reducer处理

view：用来使用数据

redux的流程

1）store通过reducer创建了初始状态
2）view通过store.getState()获取到了store中保存的state挂载在了自己的状态上
3）用户产生了操作，调用了actions 的方法
4）actions的方法被调用，创建了带有标示性信息的action
5）actions内部通过调用store.dispatch方法将标志性的action发送到了reducer中
6）reducer接收到action并根据标识信息判断之后返回了新的state
7）store的state被reducer更改为新state的时候，store.subscribe方法里的回调函数会执行，此时就可以通知view去重新获取state

例如创建如下案例
在文本框输入文字后，按下回车键，添加到列表中

store通过reducer创建了初始状态，在reducer中定义一个数组

store/index.js

import {createStore} from 'redux';
import reducer from './reducer';
const store  = createStore(reducer)
export default store

store/reducer.js

let state = {
    list: [
        { id: 1, title: "星期一", isFinished: true },
        { id: 2, title: "星期二", isFinished: false }
    ]
}
const reducer = (prevState = state, action) => {
    //让上一条数据默认为state
    let newState = { ...prevState }
    return newState
}

view通过store.getState()获取到了store中保存的state挂载在了自己的状态上

在TodoContent组件中展示数据

import React, { Component } from 'react'
import store from '../store'
import TodoInput from './TodoInput'
export default class Redux extends Component {
    constructor() {
        super()
        this.state = {
            list: []
        }
    }
    setList = () => {
        //从store的getState()方法中获取到list并更改state中的list数据
        this.setState({
            // Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。当前时刻的 State，可以通过store.getState()拿到。
            list: store.getState().list
        })
    }
    componentDidMount() {
        this.setList()
        //Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。当state的数据改变时，就去执行setList，由此state的数据也会改变，render也会重新渲染
        store.subscribe(() => {
            this.setList()
        })
    }
    handleCheck = (id) => {
        actions.changeList(id)
    }
    remove = (id) => {
        actions.removeList(id)
    }
    render() {
        let { list } = this.state
        return (
            <div>
                <TodoInput />
                {
                    list.map(item => {
                        return <li key={item.id} style={{textDecoration:item.isFinished ? 'line-through':'none'}}><input type="checkbox" checked={item.isFinished} onChange={this.handleCheck.bind(this, item.id)}  /> {item.title}
                            <button onClick={this.remove.bind(this, item.id)}>删除</button>
                        </li>
                    })
                }
            </div>
        )
    }
}

当input框输入文本时，按下键盘下的Enter，列表会增加一条

也就是当用户产生了操作，调用了actions 的方法

组件TodoInput

import actionCreators from "../../store/actionCreators"
export default class TodoInput extends Component {
    handleKey=e=>{
        if(e.keyCode==13){
            // 当按下Enter键时，触发actionCreators下的addNewTode
            actionCreators.addList(e.target.value)
            e.target.value=""
        }
      
    }
    render() {
        return (
            <input placeholder="请输入内容" onKeyUp={this.handleKey}/>
        )
    }
}

actions的方法被调用，创建了带有标示性信息的action
actions内部通过调用store.dispatch方法将标志性的action发送到了reducer中

actionCreators.js

const actionCreators = {
    addList(title){
        //需要定义一个具有特殊标识的action对象
        let action = {
            type:"addList",
            title
        }
        //需要将action对象派发给reducer
        store.dispatch(action)
    },
 changeList(id) {
        let action = {
            type: "changeList",
            id
        }
        store.dispatch(action)
    },
    removeList(id) {
        let action = {
            type: "removeList",
            id
        }
        store.dispatch(action)
    },
}
export default actions

reducer接收到action并根据标识信息判断之后返回了新的state，store.subscribe方法里的回调函数会执行，此时就可以通知view去重新获取state

reducer.js

let state = {
    list: [
        { id: 1, title: "星期一", isFinished: true },
        { id: 2, title: "星期二", isFinished: false }
    ]
}
const reducer = (prevState = state, action) => {
    let newState = { ...prevState }
    switch (action.type) {
        case "addList":
            newState.list.push({
                id: handleList.getId(newState.list),
                title: action.title
            })
            break;
        case "changeList":
            newState.list = handleList.changeList(newState.list, action.id)
            break;
        case "removeList":
            newState.list = handleList.removeList(newState.list, action.id)
            break;
        default:
            break;
    }
    return newState
}
const handleList = {
    getId(list) {
        list = list.slice()
        if (list.length === 0) return 1
        return list.sort((a, b) => {
            return b.id - a.id
        })[0].id + 1
    },
    changeList(list, id) {
        list = list.slice()
        for (let i = 0; i < list.length; i++) {
            if (list[i].id === id) {
                list[i].isFinished = !list[i].isFinished
            }
        }
        return list
    },
    removeList(list, id) {
        list = list.slice()
        return list.filter((item) => {
            console.log(item)
            if (item.id === id) {
                return false
            }
            return true
        })

    }

}
export default reducer