redux

redux文档地址

文档：https://redux.js.org/

中文文档：https://www.redux.org.cn/

只是一个状态存储，可预测，可以用在express，koa，vue，readux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理
安装：

通过yarn

yarn add redux
yarn add redux-thunk
yarn add redux-logger

引用：

import {createStore,combineReducers,applyMiddleware,compose} from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import 文件名 from '路径'

let middleArr = [
    applyMiddleware(thunk),
    applyMiddleware(logger),
]

方法

    function text(state=[],active){
       if(action.type === 'test'){
           return [...state,...active.payload]
       }
       return state
    }

引用：

let reducer =  combineReducers({
    text，
})

调用：

let store = createStore (reducer,compose(...middleArr))

抛出：

export default store;
Redux 三大原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

reducer:函数 => 纯函数（入参只读）
function reducer(state=[],active){
   if(action.type === 'test'){
       return [...state,...active.payload]
   }
   return state
}

创建一个创库

let store = Redux.createStote(reducer)
store.subscribe(()=>{
    console.log('current state:',store,getState())
})

约定规范，把入参数据统一放在plyload上

let action = {
    type:"test",
    payload:12345
}

每次 dispatch 都会执行reducer对应的函数
store.dispatch(action)
为什么叫reducer?

let res = [{count:1},{count:2}].reduce
过程

组件先创建一个action
通过dispatch发送action到store
store发送state和action到reducer
reducer处理完数据，返回一个新的state，传给store
组件监听到store的变化，更新视图
tips：redux是单向数据流