关于redux的一些学习笔记

redux是用于管理react状态的一个状态管理器

核心有三大部分组成--action、reducer、store

action：是触发state改变的状态，是普通的js对象，语义作用；

const addAction = {
    type: 'ADD_ITEM',
    text: 'to add a new item'
}

reducer：纯函数 传递action以触发state改变的函数，传入state和action，做一些符合action的处理，创建state的副本，并返回这个副本。

function todoApp(state, action) {
    switch(action.type){
        case 'ADD_ITEM': 
        return Object.assign({},state,{
            ...state.todos,
            {text: action.text, completed: true}
        });
    }
}

store：存储state的地方。
方法：
getState():获取state
dispatch(action): 更新state
subscribe(listener): 注册监听器，返回一个函数，调用此函数可注销监听器。

创建store：

import { createStore } from 'redux';
import rodoApp from './reducers';

let store = createStore(todoApp);

单向数据流--数据生命周期：
调用store.dispath(action)；
redux store会自动调用传入的reducer函数；
根reducer会把多个子reducer输出合并成一个单一的reducer树；
redux store保存根reducer返回的完整state树，该state树就是下一个state，所有调用store.subscribe(listener)的监听器都将被调用，在监听器中可以通过调用store.getState()来获取当前的state。

配合react（redux本身和react没有关系）
安装react绑定库：
npm install --save react-redux
其基于react的容器组件与UI组件相分离的思想来开发。

	UI组件	Container组件
是否直接使用Redux	否	是
数据来源	props	监听redux state
数据修改	从props调用回调函数	向redux派发action
调用方式	手动	通常由react redux生成
作用	展示骨架、样式	数据获取、状态更新

容器组件用connect()方法生成。【该方法内部做了一些性能优化，避免了很多不必要的rerender】
其本质是通过store.subscribe()从redux state树中读取部分数据，并通过props将这些数据传给对应的UI组件。

connect()的用法

import { connect } from 'react-redux'；
connect(mapStateToProps, mapDispathToProps)(TodoList)；

const getVisibleTodos = (todos, filter) => {
    switch(filter) {
        case 'SHOW_COMPLETED':
        return todos.filter(...)
        // ...
    }
}
const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispathToProps = dispatch => {
    return {
        onTodoClick: id => {
            dispatch(toggleTodo(id))
        }
    }
}

mapStateToProps: 该函数用于指定如何将当前的redux store的state映射到对应UI组件的props中。
mapDispathToProps：该函数接收dispatch()方法并返回期望注入到UI组件props中的回调函数。