react-Redux 初步了解

Redux 简介
是 JavaScript 状态容器，提供可预测化的状态管理

reac 设计思想
-> web 应用是一个状态机，视图与状态是一一对应的。
-> 所有状态，保存在一个对象里面

Redux 工作流程
-> 用户通过store.dispatch()方法发送action，告诉store，state 要发生变化
eg: store.dispatch(action);

-> store 自动调用reducer,并传入两个参数，当前state和接受的action，reducer会返回新的state
    eg: let nextState = todoApp(previousState, action);

-> state 变化。store就会调用监听函数
    eg:  store.subscribe(listener);

-> listener可以通过store.getState()得到当前状态，如果使用的是react，这是可以触发重新渲染view
    eg: function listerner() {
            let newState = store.getState();
            component.setState(newState);   
        }

Redux 概念
-> Action
-> Reducer
-> Store

Redux API
-> store
保存数据的地方，相当于一个容器。整个应用只有一个Store
createStore 函数 生成Store

    eg: let store = createStore(fn)

-> state
    store对象包含所有数据，如果想得到某个时点的数据，就要对store生成快照。这种时点的数据集合叫state,通过store.getState()拿到，一个state对应一个view，只要state相同，view就相同,State 的变化，会导致 View 的变化

-> Action
    action是view发出通知，代表state应该要发生变化的中间介质
    action是一个对象。其中type是必须属性，代表action的名字，其他属性自由设置

-> store.dispatch() 是view发出action的唯一方法

-> Reducer
    store收到action后，必须给出新的state，这样view才会发生变化，这种state的计算过程就叫reducer

-> store.subscribe()
    监听函数，state发生变化 ，就会自动执行这个函数

Redux异步
-> 中间件
applyMiddlewares() 它是redux的原生方法，作用是奖所有中间件组成一个数组，依次执行

-> 异步
    同步才做只要发出一种action即可，异步操作的差别是它发出三种action
    state也进行了改造

    三种action 有两种不同写法
        1、名称相同，参数不同
        2、名称不同

    eg: let state = {
          // ...    
          isFetching: true,         是否抓取数据
          didInvalidate: true,      数据是否过时
          lastUpdated: 'xxxxxxx'    上一次更新时间
        }
-> 异步操作思路
    操作开始时，发送一个action，触发state更新为 "正在操作" 状态，view重新渲染
    操作结束后，再发出一个action。触发state更显为 "操作结束" 状态，view再一次重新渲染

React-Redux
-> UI组件
UI 特性
1、只负责UI的呈现，不带有任何业务逻辑
2、没有状态(即不适用this.state这个状态)
3、所有数据都由参数(this.props)提供
4、不适用任何redux的API
5、纯组件，纯粹由参数决定它的值

-> 容器组件
    特征
        1、负责管理数据和业务逻辑，不负责ui的呈现
        2、带有内部状态
        3、使用redux的API

    react-redux规定，所有的UI组件都由用户提供，容器组件由react-redux自动生成，也就是说，用户负责视觉层，状态管理则是全部交给它。

-> connect方法
    将两个组件连起来
    eg: import { connect } from 'react-redux'
        const VisibleTodoList = connect( mapStateToProps,mapDispatchToProps)(TodoList);

    TodoList 是UI组件，VisibleTodoList是由react-redux通过connect方法自动生成的容器组件
->  mapStateToProps ：输入逻辑，既state映射到UI组件的参数（props）

->  mapDispatchToProps : 输出逻辑，即用户对UI组件操作映射成action

view(React) = 家具的摆放在视觉的效果上store(state) = 每个家具在空间内的坐标(如：电视的位置是x:10, y: 400)action = 小明分配任务(谁应该干什么)reducer = 具体任务都干些什么(把电视搬到沙发正对面然后靠墙的地方)所以这个过程应该是这样的：view ---> action ---> reducer ---> store(state) ---> view