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

	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中的回调函数。