redux之理解与使用

1 redux认识
Redux 由 Flux 演变而来，但受 Elm的启发，避开了 Flux 的复杂性。 不管你有没有使用过它们，只需几分钟就能上手 Redux。（这里就不需要理解Flux）
Redux 是react多交互，多数据源的状态管理器。Redux是普通对象描述应用时的状态,状态的操作。
redux的三大原则：

1. 单一数据源：整个应用的state北存储在一颗object tree 中，并且整个object tree 只存在于唯一一个store 中。
2. state 是只读的：唯一改变state的方法就是出发action，action是一个用于描述已发生的事件的普通对象。
3. 使用纯函数来执行修改：为了描述action如何改变state tree，你需要编写 reducers

2.我们通过一个小示列来认识redux

import React from 'react';
import ReactDom from 'react-dom'; 
import { createStore } from 'redux'; 
const reducer = (state={sum:0}, action)=>{      
    switch(action.type){           
           case 'INCREMENT':                
                 state.sum = state.sum + action.value;                
                 return state;           
           case 'DECREMENT':                
                 state.sum = state.sum - action.value;                
                 return state;           
           default: return state;       
     }
}

const store = createStore(reducer);
function render(){        
       const state = store.getState();        
       function increment(){                 
                store.dispatch({type:'INCREMENT',value:1});        
       }        
       function decrement(){                  
                store.dispatch({type:'DECREMENT',value:2});        
       }         
       ReactDom.render(              
                <div>                  
                      <div>{ state.sum }</div>                   
                      <input type="button" value="+" onClick={increment}/>                   
                      <input type="button" value="-" onClick={decrement}/>             
               </div>, document.getElementById('app'));     
 }     
 render();
store.subscribe(render);     复制代码

redux基本概念和api

1. store :store就是保存数据的地方，可以理解为一个容器，整个应用只能有一个store

   import { createStore } from 'redux';
   const store = createStore(func)复制代码
   

   store 对象由redux的createStore方法执行函数创建

2. state： state 对象包含所有的数据，redux规定一个 state对应一个view。

import { createStore } from 'redux';
const store = createStore(func)
const state = store.getState();复制代码

3.action: 触发state对象数据发生改变，action是一个对象，其中属性type是必须的，表示action的名称。

const action = {
      type:'INCREMENT',      value:1
}复制代码

4.store.dispatch: 是想视图发出action的唯一方法

import { createStore } from 'redux';
const store = createStore(func);
const action = {
      type:'INCREMENT',      value:1
}
store.dispatch(action);复制代码

5.subscribe：store.subscribe 可以监听dispatch发出去的数据，一旦state发生变化，执行执行该函数。

import { createStore } from 'redux';
const store = createStore(func);
store.subscribe(()=>{});复制代码

6.reducer: store.disopatch执行action后必须返回一个新的state，视图才会更新，整个过程叫reducer。reducer是一个函数，接受state，action作为参数，返回新的state。

const reducer = (state={sum:0}, action)=>{      
    switch(action.type){           
           case 'INCREMENT':                
                 state.sum = state.sum + action.value;                
                 return state;           
           case 'DECREMENT':                
                 state.sum = state.sum - action.value;                
                 return state;           
           default: return state;       
     }
}

const store = createStore(reducer);复制代码

实际开发中，对象只能包含一个state，redux提供了combineReducers的方法用户组合reducer

const cat = (state={}, action) => {
    return Object.assign({}, state);
}
const dog = (state={}, action) => {
    return Object.assign({}, state)
}
let reducers = combineReducers({cat, dog});
const store = createStore(reducers);复制代码

以上即为redux的一个基本认识和操作，当然这只是一个最基本的认识和使用，下篇我们来是使用react-redux，react-thunk等这些封装好的包来进一步学习redux。