1.什么时候需要Redux

“只要遇到React实在解决不了的问题，才需要使用Rduex”

◾ 用户的使用方式非常简单 ◾ 用户之间没有协作 ◾ 不需要与服务器大量交互，也没有使用 WebSocket ◾ 视图层（View）只从单一来源获取数据

 Redux 的适用场景：多交互、多数据源。

◾ 用户的使用方式复杂◾ 不同身份的用户有不同的使用方式（比如普通用户和管理员）◾ 多个用户之间可以协作◾ 与服务器大量交互，或者使用了WebSocket◾ View要从多个来源获取数据

从组件的角度看

◾ 某个组件的状态，需要共享◾ 某个状态需要在任何地方都可以拿到◾ 一个组件需要改变全局状态◾ 一个组件需要改变另一个组件的状态

2.Redux的设计思想

（1）Web 应用是一个状态机，视图与状态是一一对应的。（2）所有的状态，保存在一个对象里面。

3.1 Store

　　store：就是保存数据的地方，你可以把它看成一个容器，整个应用只能有一个Store

　　Redux提供了一个createStore这个函数，用来生成Store。

import {createStore} from 'redux' //redux是对象暴露var store=createStore()

　　 上面的代码中，createStore函数接收另一个函数作为参数，返回新生成的Store对象。

3.2 State

　　Store对象包含所有数据。

　　 

store 提供了一个getState()

class App extends React.Component{
        render(){      return(          
      
                     app组件 　　　　　　　　
       
{store.getState()}
      

)  }}

3.3 action

　　state的变化会改变view的变化。用户在视图层通过触发事件时间发出通知。

　　action是一个对象。其中type属性是必须的，表示action的名称。其他属性可以只有配置

action({      type:"ADD",//action的名称ADD      payload:5 //携带的信息})

　　action描述当前发生的事情。改变state的唯一办法，就是使用action。他会运送数据到store

3.4 store.dispatch()

　　store.dispatch()是 store提供的一个方法 有两个属性

store.dispatch({      type:"ADD",      payload:5})

3.5 Reducer

　  createStore方法的参数必须是一个函数这个函数叫reducer，可以做匿名函数传，可以做命名函数传

　　reducer有两个参数：

　　　　一个是state：就是数据

　　　　一个是action： view视图层客户通过事件(dispath)提交的

 　  reducer 函数必须有返回值返回的值就是新的状态

var store=createStore(function (state=datastate,action) {    console.log(action,1111)    switch (action.type) {        case 'ADD':                return state+action.payload;default:            return state;    }})

store.dispatch({      type:"ADD",      payload:5})

 

上面的代码中，reducer函数收到的名为ADD的action以后，就返回一个新的state，作为加法计算结果

 3.6 store.subscribe()

  　　store.subscribe()这个函数监听state，一旦sate发生改变，就自动执行这个函数

function redurn(){    ReactDOM.render(
       , document.getElementById('root'));}redurn()store.subscribe(redurn)

4. 工作流程

 

 　　首先用户通过触发事件

 

store.dispatch(action)；

 

　　然后store自动调用reducer 并传两个参数：当前state和收到的action，reducer会返回新的state 

 

var store=createStore(function (state=datastate,action) { 　　return state+action.payload })；

　　state一旦发生改变，store就会调用监听函数 

store.subscribe(listener)；

　　listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {  let newState = store.getState();  component.setState(newState);   }