关于redux:关于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组件相拆散的思维来开发。

容器组件用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中的回调函数。